HTML Design Form
What is HTML Form?
An HTML form is a section of a document that allows users to enter and submit information, which is then sent to a web server for processing. HTML forms are commonly used to collect various types of user data, such as usernames, passwords, contact information, email addresses, and more.
HTML forms contain interactive controls like input boxes, radio buttons, checkboxes, submit buttons, and other elements that allow users to input their information. These controls are crucial for facilitating user interaction and data submission to the server.
The <form> tag is used to create an HTML form. Inside the form, different elements like <input>, <button>, <select>, and others are used to collect and submit data to the web server.
Example of an HTML Form
<!DOCTYPE html>
<html>
<body>
<form>
<label for="username">Username:</label><br>
<input type="text" name="username">
<br><br>
<label for="email_id">Email id:</label><br>
<input type="text" name="email_id">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
Input Elements in HTML Forms
Input elements are the building blocks of HTML forms, allowing users to enter and submit various types of data. Common input elements include:
1. Text Field: Allows the user to input single-line text. It is created using the <input> element with type=”text”.
<!DOCTYPE html>
<html>
<body>
<h3>Example of Text Field</h3>
<form>
<label for="email">Email ID:</label><br>
<input type="text" name="email" id="email"><br>
</form>
</body>
</html>
Output:
2. Number Field: This field accepts numeric input. It is created using the <input> element with type=”number”.
<!DOCTYPE html>
<html>
<body>
<h3>Example of Number Field</h3>
<form>
<label for="age">Age:</label><br>
<input type="number" name="age" id="age">
</form>
</body>
</html>
Output:
.png)
3. Password Field: A password field masks the user’s input (e.g., asterisks or dots). It is created using the <input> element with type=”password”.
<!DOCTYPE html>
<html>
<body>
<h3>Example of Password Field</h3>
<form>
<label for="password">Password:</label><br>
<input type="password" name="password" id="password">
</form>
</body>
</html>
Output:
4. Radio Buttons: Used when the user needs to select one option from a list. Radio buttons are created using the <input> element with type=”radio”.
<!DOCTYPE html>
<html>
<body>
<h3>Example of Radio Buttons</h3>
<form>
<label>Select Gender:</label><br>
<input type="radio" name="gender"
id="male" value="Male">
<label for="male">Male</label><br>
<input type="radio" name="gender"
id="female" value="Female">
<label for="female">Female</label>
</form>
</body>
</html>
Output:
5. Checkboxes: Used to allow users to select one or more options from a list. Checkboxes are created using the <input> element with type=”checkbox”.
<!DOCTYPE html>
<html>
<body>
<h3>Example of Checkboxes</h3>
<form>
<b>Select Subjects:</b><br>
<input type="checkbox" name="subject"
id="maths" value="Maths">
<label for="maths">Maths</label><br>
<input type="checkbox" name="subject"
id="science" value="Science">
<label for="science">Science</label><br>
<input type="checkbox" name="subject"
id="english" value="English">
<label for="english">English</label>
</form>
</body>
</html>
Output:
6. File Select Box: Allows users to select a file from their local device and upload it. It is created using the <input> element with type=”file”.
<!DOCTYPE html>
<html>
<body>
<h3>Example of File Select Box</h3>
<form>
<label for="fileupload">Upload a file:</label>
<input type="file" name="fileupload" id="fileupload">
</form>
</body>
</html>
Output:
7. Textarea: A textarea allows users to input multi-line text. It is created using the <textarea> element.
<!DOCTYPE html>
<html>
<body>
<h3>Example of a Text Area</h3>
<form>
<label for="description">Description:</label><br>
<textarea name="description"
id="description" rows="5" cols="50"></textarea>
</form>
</body>
</html>
Output:
8. Select Boxes: Used to present a dropdown list of options. Select boxes are created using the <select> element, and the individual options are defined using the <option> element.
<!DOCTYPE html>
<html>
<body>
<h3>Example of a Select Box</h3>
<form>
<label for="country">Country:</label>
<select name="country" id="country">
<option value="India">India</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Australia">Australia</option>
</select>
</form>
</body>
</html>
Output:
9. Reset And Submit Buttons: The Submit Button allows the user to send the form data to the web server. The Reset Button is used to reset the form data and use the default values.
<!DOCTYPE html>
<html>
<body>
<h3>Example of a Submit And Reset Button</h3>
<form action="test.php" method="post" id="users">
<label for="username">Username:</label>
<input type="text" name="username" id="Username">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
Output:
Attributes used in HTML Forms
1. action Attribute: The action to be performed after the submission of the form is decided by the action attribute. Generally, the form data is sent to a webpage on the web server after the user clicks on the submit button.
<!DOCTYPE html>
<html>
<body>
<h3>Example of a Submit And Reset Button</h3>
<form action="test.php" method="post" id="users">
<label for="username">Username:</label>
<input type="text" name="username" id="Username">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
If you click the submit button, the form data
would be sent to a page called test.php .
2. target Attribute: The Target attribute is used to specify whether the submitted result will open in the current window, a new tab, or a new frame. The default value used is “self” which results in the form submission in the same window. For making the form result open in a new browser tab, the value should be set to “blank”.
<!DOCTYPE html>
<html>
<body>
<form action="/test.php" target="_blank">
Username:<br>
<input type="text" name="username">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
After clicking on the submit button, the result
will open in a new browser tab.
3. name Attribute: The name attribute is required for each input field. If the name attribute is not specified in an input field then the data of that field would not be sent at all.
<!DOCTYPE html>
<html>
<body>
<form action="/test.php" target="_blank">
Username:<br>
<input type="text">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
In the above code, after clicking the submit button, the form data will
be sent to a page called /test.php. The data sent would not include the
username input field data since the name attribute is omitted.
4. method Attribute: It is used to specify the HTTP method used to send data while submitting the form. There are two kinds of HTTP Methods, which are GET and POST.
GET Method
<!DOCTYPE html>
<html>
<body>
<form action="/test.php" target="_blank"
method="GET">
Username:<br>
<input type="text" name="username">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
In the GET method, after the submission of the form, the form values
will be visible in the address bar of the new browser tab.
Post Method
<!DOCTYPE html>
<html>
<body>
<form action="/test.php" target="_blank"
method="post">
Username:<br>
<input type="text" name="username">
<br>
Password:<br>
<input type="password" name="password">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
In the post method, after the submission of the form, the form values
will not be visible in the address bar of the new browser tab as it was
visible in the GET method.
Supported Browsers
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
HTML is the foundation of webpages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
