Group form fields with <fieldset> and <legend> elements
<fieldset>
fieldset element groups related form elements and content<legend>
legend element defines caption for <fieldset> elementExample
<!doctype html>
<html>
<head>
<title>using optgroup in HTML 5 </title>
<meta charset=”utf-8”>
</head>
<body>
<h2>Job Application Form</h2>
<form action="process.php">
<fieldset>
<legend>Your Contact Informatioin:</legend>
Full Name :<br>
<input type="text" name="fullname" placeholder="John Doe"><br>
Email:<br>
<input type="text" name="email" placeholder="johndoe@gmail.com"><br>
Telephone:<br>
<input type="tel" name="telephone" placeholder="92-343243"><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
<textarea>......</textarea> element in HTML
Textarea element is used to creating multi line text box , which allows users to type comments , suggestions etc. Following example create a contact us form which includes <textarea> element for users message:Example:
Contact Us form in HTML 5 which includes <textarea>.....</textarea> element
<!doctype html>
<html>
<head>
<title>using optgroup in HTML 5 </title>
<meta charset=”utf-8”>
</head>
<body>
<h2>Contact Us Form</h2>
<form action="process.php">
First Name:<input type="text"> <br />
Last Name:<input type="Text"> <br />
Email:<input type="email"> <br />
Contact:<input type="tel"> <br />
Your Message: <br />
<textarea cols="22" rows="4">
</textarea> <br />
<input type="submit">
</form>
</body>
</html>
<datalist> element in HTML 5
This element defines a predefined list of options for input element, following example creates a list of cities.Example:
<!doctype html>
<html>
<head>
<title>DataList Element</title>
<meta charset=”utf-8”>
</head>
<body>
<h2>This program demonstrates datalist element in HTML 5</h2>
<form action="process.php">
<input list="cities">
<datalist id="cities">
<option value="Sukkur">
<option value="Karachi">
<option value="Hyderabad">
<option value="Larkana">
<option value="Multan">
<option value="Islamabad">
<option value="Lahore">
<option value="Quetta">
<option value="Abotabad">
<option value="Multan">
<option value="Sargodha">
</datalist>
</form>
</body>
</html>
<output> element in HTML 5
This element doesn't take any input , but is used to show some output result to users.Example
<!doctype html>
<html>
<head>
<title>DataList Element</title>
<meta charset=”utf-8”>
</head>
<body>
<h2>This program demonstrates datalist element in HTML 5</h2>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="1">
+<input type="number" id="b" value="1">
=<output name="x" for="a b"></output>
</form>
</body>
</html>
<html>
<head>
<title>DataList Element</title>
<meta charset=”utf-8”>
</head>
<body>
<h2>This program demonstrates datalist element in HTML 5</h2>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="1">
+<input type="number" id="b" value="1">
=<output name="x" for="a b"></output>
</form>
</body>
</html>
0 Comments:
Post a Comment