Wednesday, 8 April 2015

HTML Form Example

Example 1

<!DOCTYPE html>
<html>
<head>
 </head>
<body>
<div>
<h1> Registration Form </h1>
<form  name="frmRegister">
<table  align="center" width="400">
<tr>
<td> User Name </td>
<td>  <input type="text" name="txtUserName"

placeholder="Name max 5 chars"  maxlength="5"

required ></td>
</tr>
<tr>
<td> Password  </td>
<td>  <input type="password"  name="txtPassword"

placeholder="Password max 10 chars" autofocus>

</td>
</tr>
<tr>
<td> Select City </td>
<td>
<select>
<option value="-1"> Select a City </option>
<optgroup  label="south">
<option value="chennai"> Chennai </option>
<option value="Hyd">Hyd</option>
</optgroup>
<optgroup label="north">
<option value="delhi"> Delhi</option>
<option value="mumbai"> Mumbai </option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td> Select a Book </td>
<td>
<label> Select Your Book:
<datalist id="books">
<select name="books">
<option> Java Script </option>
<option> Java Advanced </option>
<option> ASP </option>
<option> ASP.NET </option>
</select>
</datalist>
<input type="text"  name="txtbooks" list="books">
</label>
</td>
</tr>
<tr>
<td> Your Progress </td>
<td> <meter min="1" max="100" value="17">

</meter> </td>
</tr>
<tr>
<td> Your Progress </td>
<td> <progress min="1" max="100" value="85">

</progress> 85% completed  </td>
</tr>
<tr>
<td> Your Address </td>
<td>
<textarea> </textarea>
 </td>
</tr>

<tr>
<td> Select Gender </td>
<td> <input type="radio"  name="Gender"

value="male" > Male

<input type="radio"  name="Gender"

value="female" checked> Female
</td>
</tr>
<tr>
<td> Select Hobbies </td>
<td> <input type="checkBox"  name="optMusic">

Music
<input type="checkBox"  name="optMovies">

Movies
<input type="checkBox"  name="optBooks"> Books
</td>
</tr>
<tr>
<td> Age </td>
<td> <input type="number" min="15" max="35"

value="22">  </td>
</tr>
<tr>
<td> Mobile </td>
<td> <input type="text" name="txtMobile"

pattern="\+91[0-9]{10}" placeholder="Enter 10 digit

Mobile"> </td>
</tr>
<tr>
<td> Enter Check No </td>
<td> <input type="text" name="txtCheck"

pattern="[A-Z]{3}\-[0-9]{3}\-[A-Z]{2}[0-9]{2}"> </td>
</tr>
<tr>
<td> Your Email </td>
<td>  <input type="email" name="txtemail"> </td>
</tr>
<tr>
<td> Upload Photo </td>
<td> <input type="file"> </td>
</tr>
<tr>
<td> Your Website </td>
<td> <input type="url"> </td>
</tr>
<tr>
<td> Date of Birth </td>
<td>  <input type="date"> </td>
</tr>
<tr>
<td> Terms of Service </td>
<td> <textarea rows="8" cols="30" readonly>

MICROSOFT SOFTWARE LICENSE AGREEMENT
WINDOWS 8.1 PRO
Thank you for choosing Microsoft Windows 8.1 Pro.

This is a license agreement between you and

Microsoft Corporation (or, based on where you live,

one of its affiliates) that describes your rights to use

the Windows 8.1 Pro software. For your

convenience, we’ve organized this agreement into

two parts. The first part includes introductory terms

phrased in a question and answer format; the

Additional Terms and Limited Warranty follow and

contain greater detail. You should review the entire

agreement, including any linked terms, because all

of the terms are important and together create this

contract that applies to you. You can review linked

terms by pasting the forward link into your browser

window once the software is running. The Additional

Terms contain a binding arbitration clause and class

action waiver. If you live in the United States, these

affect your rights to resolve a dispute with Microsoft,

so
        </textarea> </td>
</tr>
<tr>
<td>  &nbsp </td>
<td>  
<input type="submit"  value="Submit"

name="btnSubmit">
<input type="reset"  value="Reset"

name="btnReset">
<input type="button"  value="Continue"

name="btnContinue">
</td>
</tr>

</table>
</form>
</div>
</body>
</html>

Example 2

<html>
<head>
<title>Forms</title>
</head>
<body>
<form>
<fieldset>

<legend>Your Details:</legend>

<label>Name: <input type="text" name="name" size="30" maxlength="100"></label><br />

<label>Email: <input type="email" name="email" size="30" maxlength="100"></label><br />
</fieldset><br />
<fieldset>


<legend>Your Review:</legend>
<p>

<label for="hear-about">How did you hear about us?</label>

<select name="referrer" id="hear-about">
<option value="google">Google</option>
<option value="friend">Friend</option>
<option value="advert">Advert</option>
<option value="other">Other</option>
</select>
</p>
<p>


Would you visit again?<br />
<label><input type="radio" name="rating" value="yes" /> Yes</label>


<label><input type="radio" name="rating" value="no" /> No</label>


<label><input type="radio" name="rating" value="maybe" /> Maybe</label>
</p>
<p>
<label for="comments">Comments:</label><br />

<textarea rows="4" cols="40" id="comments"></textarea>
</p>

<label><input type="checkbox" name="subscribe" checked="checked" /> Sign me up for email

updates</label><br />
<input type="submit" value="Submit review" />
</fieldset>
</form>
</body>
</html>


Example 3

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form name ="register">
<h1>Registration Form</h1>
<fieldset>
<legend>Personal details</legend>
<div>
<label>First Name
<input id="given-name" name="given-name" type="text" placeholder="First name only" required autofocus>
</label>
</div>
<div>
<label>Last Name
<input id="family-name" name="family-name" type="text" placeholder="Last name only" required autofocus>
</label>
</div>
<div>
<label>Date of Birth
<input id="dob" name="dob" type="date" required>
</label>
</div>
<div>
<label>Email
<input id="email" name="email" type="email" placeholder="example@domain.com" required>
</label>
</div>
<div>
<label>URL
<input id="url" name="url" type="url" placeholder="http://mysite.com">
</label>
</div>
<div>
<label>Telephone
<input id="phone" name="phone" type="text" placeholder="Eg. +919000000001" required pattern="\+91[0-9]{10}">
</label>
</div>
<div>
<label>Shoesize
<input id="shoes" name="shoes" type="number" min="5" max="18" step="0.5" value="9">
</label>
</div>
<div>
<label>Flying Skill level (1 low - 100 high)
<input id="skill" name="skill" type="range" min="1" max="100" value="0">
<output name="output" onforminput="value=a.value">0</output>
</label>
</div>
</fieldset>
<fieldset>
<legend>Billing address</legend>
<div>
<label>Address
<textarea id="address" name="address" rows=5 required></textarea>
</label>
</div>
<div>
<label>Post code
<input id="postCode" name="postCode" type="text" required>
</label>
</div>
<div>
<label>Country
<input id="country" name="country" list="country-names" type="text" required>
<datalist id="country-names">
<option label="England" value="England"></option>
<option label="India" value="India"></option>
<option label="US" value="US"></option>
<option label="Canada" value="Canada"></option>


</datalist>
</label>
</div>
</fieldset>
<fieldset>
<legend>Card details</legend>
<fieldset>
<legend>Card type</legend>
<div class="card-type">
<input id="visa" name="cardtype" type="radio">
<label for="visa">VISA</label>
<input id="mastercard" name="cardtype" type="radio">
<label for="mastercard">Mastercard</label>
<input id="amex" name="cardtype" type="radio">
<label for="amex">AMEX</label>
</div>
</fieldset>
<div>
<label>Name
<input id="cardName" name="cardName" type="text" placeholder="Name as it appears on your card" required>
</label>
</div>
<div>
<label>Card number
<input id="cardNo" name="cardNo" type="number" required title="The sixteen digit number across the middle of your card.">
</label>
</div>
<div>
<label>Security code
<input id="security" name="security" type="number" required pattern="[0-9]{3}" title="The last three digits on the back of your card.">
</label>
</div>
<div>
<label>Expiry Date
<input id="expiry" name="expiry" type="month">
</label>
</div>
</fieldset>
<fieldset>
<div>
<button type=submit>Place Order</button>
</div>
</fieldset>
</form>
</body>
</html>






Posted by at
Labels: