PROWAREtech
Hyper-text Markup Language: Tutorial - Page 3
A tutorial of HTML5 - An Example Form.
An example form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello, World</title>
<style>
fieldset {
border: 1px solid #ccc;
}
body {
background-color: #fff;
}
label {
display: block;
}
input, textarea, select {
border: 1px solid #787878;
cursor: initial;
font-size: initial;
font-weight: initial;
padding: initial;
margin-right: initial;
width: auto;
background-image: none;
}
</style>
</head>
<body>
<form id="newUser" method="post" action="/Forms/NewUser">
<fieldset>
<legend>User Details</legend>
<label for="lastName">Last Name:</label>
<input type="text" name="last" id="lastName" /><br />
<label for="firstName">First Name:</label>
<input type="text" name="first" id="firstName" /><br />
<label for="email">Email:</label>
<input type="text" name="email" id="email" required />
</fieldset>
<fieldset>
<legend>Other Information</legend>
<label for="age">Age:</label>
<input type="text" name="age" id="age" /><br />
<label for="browser">Browser:</label>
<select size="14" id="browser" name="browser">
<optgroup label="Netscape Navigator">
<option label="4.x or higher">Netscape Navigator 4.x or higher</option>
<option label="3.x">Netscape Navigator 3.x</option>
<option label="2.x">Netscape Navigator 2.x</option>
<option label="1.x">Netscape Navigator 1.x</option>
</optgroup>
<optgroup label="Microsoft Internet Explorer">
<option label="4.x or higher">Microsoft Internet Explorer 4.x or higher</option>
<option label="3.x">Microsoft Internet Explorer 3.x</option>
<option label="2.x">Microsoft Internet Explorer 2.x</option>
<option label="1.x">Microsoft Internet Explorer 1.x</option>
</optgroup>
<optgroup label="Opera">
<option label="3.x or higher">Opera 3.x or higher</option>
<option label="2.x">Opera 2.x</option>
</optgroup>
<option selected>Other</option>
</select><br />
<label for="comments">Comments:</label>
<textarea id="comments" name="comments" cols="30" rows="20"></textarea>
</fieldset>
<div style="padding-top:5px;text-align:right;">
<input type="reset" value="reset form" />
<input type="submit" value="submit form" />
</div>
</form>
</body>
</html>
Comment
