PROWAREtech

articles » current » html » tutorial » page-3

Hyper-text Markup Language: Tutorial

A tutorial of HTML5 - Page 3 - 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>
<<<[Page 3 of 8]>>>

This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE