HTML FORMS
HTML Forms are required to collect data’s from user. A form allows visitor to input data such as contact details like name, password, email address, phone numbers e.t.c
In this blog post, we will explore the world of input types in HTML, understanding their functionalities, attributes. The <form> tag is used to create an HTML form.
- Text Input:
<input type="text">
The text input type is the most common and straightforward element, allowing users to input single-line text.
Syntax :
<input type="text" name="username" ">
Example
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
Username: <input type = "text" name = "username" />
</form>
</body>
</html>
- Password Input:
<input type="password">
Password input types are used to create secure fields, hiding the characters typed by users and they are shown as dots. This input field is also a single line input control.
Syntax
<input type="password" name="password">
Example
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>
- Multi-line Text Input Control:
<textarea>
Checkboxes allow users to select one or more options from a list. To create a checkbox, use the following syntax:
The multi-line text input control allows user to enter details that are more than single line
Syntax
<textarea rows = "5" cols = "50" name = "description">
Enter description
</textarea>
Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Comment : <br />
<textarea rows = "5" cols = "50" name = "comment">
Comment
</textarea>
</form>
</body>
</html>
4. Checkbox: <input type="checkbox">
Checkboxes allow users to select one or more options from a list of pre-defines options. To create a checkbox, assign “checkbox” as the value of the checkbox.
Syntax
<input type="checkbox" name="name" value="yes">
Example
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "HTML" value = "on">
<input type = "checkbox" name = "CSS" value = "on">
</form>
</body>
</html>
5. Radio Buttons: <input type="radio">
Radio buttons allows users to choose only one option from a group of option. To create a set of radio buttons, use the same “name” attribute for each option
Syntax
<input type="radio" name="name" value="name">
Example
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
Male :<input type = "radio" name = "gender" value = "male">
Female : <input type = "radio" name = "gender" value = "female">
</form>
</body>
</html>
- Number Input:
<input type="number">
The number input type is used to recieve numeric input, allowing users to enter numbers only.
Syntax
<input type="number" name="number">
7. Email Input: <input type="email">
The email input control allows user enter email address,
Email :<input type="email" name="email" placeholder="Enter your email">
8. Range Input: <input type="range">
The range input type creates a slider to select a value within a specified range:
<input type="range" name="volume" min="0" max="100" step="1">
9. Dropdown Input Control
The drop down input control contains list of options that users can select one or more options.
Syntax
<select name = "dropdown">
<option value = "name"> Option_name</option>
</select>
Example
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "HTML" selected>HTML</option>
<option value = "CSS">CSS</option>
<option value = "JavaScript">JAVASCRIPT</option>
<option value = "PHP">PHP</option>
<option value = "SQL">SQL</option>
<option value = "Python">PYTHON</option>
</select>
</form>
</body>
</html>
