HTML--Note6--form

Text Input:

<form>        <input type="text" name="textinput" size="15" /></form>

Password Input:

<form><input type="password" name="password" size="15" /></form>

Textarea Input:

<form <textarea name="textcontent" cols="20" rows="10">Enter words here...</textarea></form>

Radio Button:

<form><p>Please select your favorite genre:<br /><input type="radio" name="genre" value="rock" checked="checked"/> Rock<input type="radio" name="genre" value="pop"  /> Pop<input type="radio" name="genre" value="jazz" /> Jazz</p></form>

Checkbox:

<form><p>Please select your favorite music service(s):<br /><input type="checkbox" name="service" value="itunes" checked="checked" /> iTunes<input type="checkbox" name="service" value="lastfm" /> Last.fm<input type="checkbox" name="service" value="spotify" /> Spotify</p></form>

Drop Down List Box:

<form><p>What device do you listen to music on?</p><select name="devices"><option value="ipod">iPod</option><option value="radio">Radio</option><option value="computer">Computer</option></select></form>

Multiple Select Box:

<form><p>Do you play any of the following instruments?                (You can select more than one option by holding down control on a PC               or command key on a Mac while selecting different options.)</p><select name="instruments" size ="4" multiple="multiple">                <option value="flute" selected="selected">Flute</option><option value="guitar" >Guitar</option><option value="drums">Drums</option><option value="keyboard" >Keyboard</option><option value="bass">Bass</option></select></form>

File Input Box:

<form><input type="file" name="uploadfile" /><input type="submit" value="Upload" /></form>

Submit Button:

<form><p>Subscribe to our email list:</p><input type="text" name="email" /><input type="submit" name="subscribe" value="Submit"/></form>

Image Button:

<form><p>Subscribe to our email list:</p> <input type="text" name="email" /><input type="image" src="images/subscribe.jpg" width="100" height="20" /></form>

Button and Hidden:

<form><button><img src="images/add.gif" alt="add" width="10" height="10" /> Add</button><input type="hidden" name="bookmark" value="lyrics" /></form>

Labelling Form Controls:

<form><label>Age: <input type="text" name="age" /></label><br/ >Gender:<input id ="female"type="radio" name="gender" value="f">        <label for="female"> Female</label><input id="male" type="radio" name="gender" value="m"><label for="male">Male</label></form>

Grouping Form Elements:

<form>      <fieldset><span style="white-space:pre"></span><legend>Contact details </legend><span style="white-space:pre"></span><label>Email:<br /><input type="text" name="email" /></label><br /><span style="white-space:pre"></span><label>Mobile:<br /><input type="text" name="mobile" /></label><br /><span style="white-space:pre"></span><label>Telephone:<br /><input type="text" name="telephone" /></label>        </fieldset></form>

HTML5 Date Input:

<input type="date" name="depart" />

HTML5 Email Input:

<input type="email" name="email" />

HTML5 URL Input:

<input type="url" name="website" />

HTML5 Search Input:

<input type="search" name="search" placeholder="Enter Keyword"  />

HTML5 Form Validation:

<form><p><label for="username">Username:</label><input type="text" name="username" required="required" /></title><br /><label for="password">Password:</label><input type="password" name="password" required="required" /><input type="submit" value="Submit" /></p></form>