5 min readJan 8, 2021
Web_Development
part: 1.3
Hyper Text Markup Language [ HTML ]
Forms In HTML
HTML Forms are used to collect user input from user’s, <form></form> element define the HTML Forms.
Form element control different type of tag’s in HTML.
<input></input>It defines an input text area control.<textarea></textarea>It defines a multiline input control (test area).<label></label>It defines a label for an <input> elements.<fieldset></fieldset>It groups related elements in form element.<legend></legend>It gives the title for fieldset.<select></select>It defines a drop-down list.<option></option>It defines an option in drop-down list.<button></button>Defines a clickable button.
Syntax:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML-Form</title>
</head>
<body>
<form>
<label for="input_text">Text :</label>
<input id="input_text" type="text" placeholder="Text">
<br>
<label for="input_password">Password :</label>
<input id="input_password" type="password" placeholder="Password">
<br>
<label for="input_number">Number :</label>
<input id="input_number" type="number" placeholder="Number">
<br>
<label for="input_url">URL:</label>
<input id="input_url" type="url" placeholder="<https://website.com>">
<br>
<label for="input_search">Search:</label>
<input id="input_search" type="search" placeholder="Search">
<br>
<input type="submit">
</form>
</body>
</html>In this Form element we going to see how build the Form Basic Elements, Student Information Form, Get-form and Post-form.
Form Basic Elements [ we cover the all basic elements in HTML Form ]
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML-Form</title>
</head>
<body>
<h1>Form in HTML</h1>
<hr>
<h2>Basic Form Elements</h2>
<form>
<fieldset>
<legend>Basic Form Elements</legend>
<p>
<label for="input_text">Text :</label>
<input id="input_text" type="text" placeholder="Text">
</p>
<p>
<label for="input_email">Email :</label>
<input id="input_email" type="email" placeholder="email@gmail.com">
</p>
<p>
<label for="input_password">Password :</label>
<input id="input_password" type="password" placeholder="Password">
</p>
<p>
<label for="input_number">Number :</label>
<input id="input_number" type="number" placeholder="Number">
</p>
<p>
<label for="input_phonenumber">Phone No :</label>
<input id="input_phonenumber" type="tel" placeholder="+91 9999999999">
</p>
<p>
<label for="input_url">URL:</label>
<input id="input_url" type="url" placeholder="<https://website.com>">
</p>
<p>
<label for="input_search">Search:</label>
<input id="input_search" type="search" placeholder="Search">
</p>
</fieldset>
<fieldset>
<legend>Select Element</legend>
<p>
<label for="select">Select</label>
<select name="select" id="input_select">
<optgroup label="Option group1">
<option>option1</option>
<option>option2</option>
<option>option3</option>
</optgroup>
<optgroup label="Option group2">
<option>option4</option>
<option>option5</option>
<option>option6</option>
</optgroup>
</select>
</p>
</fieldset>
<fieldset>
<legend>Radio Element</legend>
<p>
<ul>
<li>
<label for="radio_option1">Option 1:</label>
<input id="radio_option1" type="radio" checked>
</li>
<li>
<label for="radio_option2">Option 2:</label>
<input id="radio_option2" type="radio">
</li>
</ul>
</p>
</fieldset>
<fieldset>
<legend>CheckBox Element</legend>
<p>
<label for="checkbox_option1">CheckBox 1:</label>
<input id="checkbox_option1" type="checkbox" checked>
<label for="checkbox_option2">CheckBox 2:</label>
<input id="checkbox_option2" type="checkbox">
<label for="checkbox_option3">CheckBox 3:</label>
<input id="checkbox_option3" type="checkbox">
<label for="checkbox_option4">CheckBox 4:</label>
<input id="checkbox_option4" type="checkbox">
</p>
</fieldset>
<fieldset>
<legend>TextArea Element</legend>
<label for="textarea">TextArea :</label>
<br>
<textarea name="textarea" id="input_textarea" cols="30" rows="10"></textarea>
<br>
<input type="submit" name="submit" id="input_submit"> <input type="reset">
</fieldset>
</form>
</body>
</html>
Student Information Form:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Information Form</title>
</head>
<body>
<h1>Student Information Form</h1>
<hr>
<fieldset>
<legend>Student Information</legend>
<p>
<label for="input_name">Name :</label>
<input id ="input_text" type="text" placeholder="Name">
</p>
<p>
<label for="input_email">Email :</label>
<input id ="input_email" type="email" placeholder="test@domain.com">
</p>
<p>
<label for="input_age">Age :</label>
<input id ="input_age" type="number" placeholder="Age">
</p>
<p>
<label for="input_phonenumber">Phone Number :</label>
<input id ="input_phonenumber" type="tel" placeholder="(999) 999999">
</p>
<h2>Gender</h2>
<p>
<label for="input_male">Male :</label>
<input type="radio" checked>
<label for="input_female">Female :</label>
<input type="radio">
</p>
<h2>Do you need special services:</h2>
<p>
<label for="input_collegeBus">College bus :</label>
<input type="checkbox" name="collegebus" id="input_collegeBus" checked>
<label for="input_collegeLunch">College Lunch :</label>
<input type="checkbox" name="collegelunch" id="input_collegeLunch">
<label for="input_hostel">Hostel :</label>
<input type="checkbox" name="Hostel" id="input_hostel">
</p>
<p>
<label for="textarea">Any comments</label><br>
<textarea name="any_comments" id="input_comments" cols="30" rows="5"></textarea>
</p>
<p>
<input type="submit"> <input type="reset">
</p>
</fieldset>
</body>
</html>OUTPUT:
Get-form & Post-form Method:
Both GET and POST method is used to transfer data from client to server in HTTP protocol, GET method carries request parameter appended in URL string client to server and POST method carries request parameter in message body which makes it more secure way of transferring data from client to server, action attribute done some activity when the form will submitted.
Syntax for GET method:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GET and POST method</title>
</head>
<body>
<form method="GET" action="">
</form>
</body>
</html>Syntax for POST method:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GET and POST method</title>
</head>
<body>
<form method="POST" action=""> </form>
</body>
</html>
Code for GET method:
In this GET method, action attribute value i assign the external HTML file to perform some activity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GET and POST method</title>
</head>
<body>
<h1>Form GET and POST method</h1>
<hr>
<form method="GET" action="results.html">
<label for="FirstName">FirstName: </label>
<input type="text" name="FirstName" placeholder="Enter your First Name" id="FirstName"/>
<br><br>
<label for="LastName">LastName: </label>
<input type="text" name="LastName" placeholder="Enter your Last Name" id="LastName"/>
<br><br>
<input type="submit" />
<input type="reset" value="Clear Form"/>
</form>
</body>
</html>OUTPUT:
If I click Clear form button it reset form in webpage, then I click the Submit button it will redirect to external HTML page because i add action attribute to perform the action.
Code for POST method:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GET and POST method</title>
</head>
<body>
<h1>Form GET and POST method</h1>
<hr>
<form method="POST" action="results.html">
<label for="FirstName">FirstName: </label>
<input type="text" name="FirstName" placeholder="Enter your First Name" id="FirstName"/>
<br><br>
<label for="LastName">LastName: </label>
<input type="text" name="LastName" placeholder="Enter your Last Name" id="LastName"/>
<br><br>
<input type="submit" />
<input type="reset" value="Clear Form"/>
</form>
</body>
</html>OUTPUT:
Whitespace:
To create extra spaces before, after, or in-between your text, use the
In our next blog we going to see Div and Span tags, iFrames, Additional HTML Tags.