Forms and Input
Form tags are used to create different types of Forms in an HTML Document.
1. <form>
<form> tag defines an HTML form for user input.
Example :
Example :
Output :
<!DOCTYPE HTML>
<html>
<title> Form tag </title>
<head>
<h1>form in HTML</h1>
<body>
<form action="#">
First name:
<input type="text" placeholder = "First Name"
value="">
<br><br>
Last name:
<input type="text" placeholder = "Last Name"
value="">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
2. <input>
<input> tag defines an input control.
Example :
Example :
<!DOCTYPE HTML>
<html>
<title> input tag </title>
<head>
<h1>The input element</h1>
<body>
<form action="#">
First name:
<input type="text" placeholder = "First Name"
value="">
<br><br>
Last name:
<input type="text" placeholder = "Last Name"
value="">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
3. <textarea>
<textarea> tag defines a multiline input control.
Example :
Output :
Example :
Output :
Output :
Output :Example :
<!DOCTYPE HTML>
<html>
<title> textarea </title>
<head>
<h1>Textarea tag </h1>
<body>
<form>
<textarea row="5" cols="50">
this is example of textarea in html document.
</textarea>
</form>
</body>
</html>
Output :
4. <button>
<button> tag defines a clickable button in Form.
Example :
Example :
<!DOCTYPE HTML>
<html>
<title> Button tag </title>
<head>
<h1>Button tag </h1>
<body>
<form>
Enter Name: <input type="text" name ="Name"/><br/>
<br>
<button> Submit </button>
</form>
</body>
</html>
5. <select>
<select> tag defines a drop-down list in form.
Example :
Example :
Output :
<!DOCTYPE HTML>
<html>
<title> Select tag </title>
<head>
<h1>Select tag defines a drop-drown list in form. </h1>
<body>
<form>
<select name ="dropdown">
<option value = "HTML"> HTML </option>
<option value = "MYSQL"> MYSQL </option>
<option value = "DBMS"> DBMS </option>
<option value = "DAA"> DAA </option>
</select>
<input type = "submit" value = "submit"/>
</form>
</body>
</html>
6. <optgroup>
<optgroup> tag defines a group of options in drop-down list in html
Example :
<!DOCTYPE HTML>
<html>
<title> optgroup tag </title>
<head>
<h1>optgroup tag defines a group of related options in drop-drown list in html document. </h1>
<body>
<form>
<select name ="dropdown">
<optgroup label="Programming Language">
<option value = "HTML"> HTML </option>
<option value = "MYSQL"> MYSQL </option>
<option value = "DBMS"> DBMS </option>
<option value = "DAA"> DAA </option>
</optgroup>
<optgroup label="Computer subject">
<option value = "Computer"> Computer </option>
<option value = "Computer Network"> Computer Network </option>
<option value = "Computer Fundamental"> Computer Fundamental </option>
</optgroup>
</select>
<input type = "submit" value = "submit"/>
</form>
</body>
</html>
7. <label>
<label> tag defines a label for an <input> element in html page.
Example :
Example :
<!DOCTYPE HTML>
<html>
<title> label tag </title>
<head>
<h1> label tag defines a label for an input element in html. </h1>
<body>
<form>
<label for="Hot">Hot</label>
<input type="radio" name="Tea" id="Hot" value="Hot"><br>
<label for="Cold">Cold</label>
<input type="radio" name="Tea" id="Cold" value="Cold"><br>
<label for="other">Other</label>
<input type="radio" name="Tea" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output :
8. <fieldset>
<fieldset> tag defines a groups related elements in a form.
Example :
Example :
Output :
<!DOCTYPE HTML>
<html>
<title> fieldset tag </title>
<head>
<h1> The fieldset element </h1>
<body>
<form>
<fieldset>
<legend>Profile : </legend>
<label for="fname"> First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="Iname" name="Iname"><br><br>
<label for="email">Email :</label>
<input type="email" id="email" name="email"><br><br>
<label for="phone no">Phone no :</label>
<input type="phone no" id="phone no" name="phone no"><br><br>
<label for="dob"> DOB :</label>
<input type="date" id="dob" name="dob"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
9. <legend>
<legend> tag defines a caption for a <fieldset> element.
Example :
Example :
<!DOCTYPE HTML>
<html>
<title> legend tag </title>
<head>
<h1> The legend element </h1>
<body>
<form>
<fieldset>
<legend>Profile : </legend>
<label for="fname"> First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="Iname" name="Iname"><br><br>
<label for="email">Email :</label>
<input type="email" id="email" name="email"><br><br>
<label for="phone no">Phone no :</label>
<input type="phone no" id="phone no" name="phone no"><br><br>
<label for="dob"> DOB :</label>
<input type="date" id="dob" name="dob"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
10. <output>
<output> tag defines the result of a calculation.
Example :
Example :
<!DOCTYPE HTML>
<html>
<head>
<title>Output tag </title>
</head>
<body>
<h1>Calculate the Sum of the two Numbers : </h1>
<form oninput="res.value=parseInt(a.value)+parseInt(b.value);">
<label>Enter Value.</label><br>
<input type="number" name="a" value=""/><br>
+<br/>
<label>Enter Value.</label><br>
<input type="number" name="b" value=""><br>
=<br>
Output is:<output name="res"></output>
</form>
</body>
</html>
5 Comments
All Tags are very useful For create A HTMl Web Page
ReplyDeleteThe best and clear News is very much imptortant to us. web design new york
ReplyDeleteThis is great content! I am swept away by your presentation and unique viewpoints. I agree with so much of your article. I’ll come back. website designer nyc
ReplyDeleteWow that was strange. I just wrote an incredibly long comment but after I clicked submit my comment didn’t appear. Grrrr… well I’m not writing all that over again. Regardless, just wanted to say wonderful blog! branding sf
ReplyDeleteHey! Great post! Please do tell us when we can see a follow up! ux san francisco
ReplyDelete