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>