HTML Form
HTML Forms are used to send data across the web and are often used as contact form to convert information input by a user into Leads. HTML forms includes many inputs like text, password, file, radio, checkbox etc.
The elements used in HTML form are form tag as parent, input, textarea,, select, button and label.
HTML Form Elements
- HTML Form Tag
- Input Tag
- Input type password
- Input type file
- Radio Buttons
- Checkbox
- Select Dropdown
- Textarea
- Button
- Fieldset
- legend
- label
HTML Form Tag
An HTML form can have input elements, checkbox, radio buttons, submit button and more.A form can also contain select dropdown, textarea, fieldset, legend, and label elements.
What is html ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
</body>
<fieldset>
<legend>Online Form </legend>
<form>
<table>
<tr>
<td>
<label for="uname">Name</label>
</td>
<td>
<input type="text" id="uname" name="username">
</td>
</tr>
<tr>
<td>
<label for="uemail">Email</label>
</td>
<td>
<input type="text" id="uemail" name="usermail">
<button type="button">Check</button>
</td>
</tr>
<tr>
<td>
<label for="age">Age</label>
</td>
<td>
<input type="text" name="userage" id="age" size="2" maxlength="2">
</td>
</tr>
<tr>
<td>
<label>Country</label>
</td>
<td>
<input type="text" value="India" name="country" disabled>
</td>
</tr>
<tr>
<td>
<label for="pass">Password</label>
</td>
<td>
<input type="password" id="pass">
</td>
</tr>
<tr>
<td>
<label for="res">Resume</label>
</td>
<td>
<input type="file" id="res">
</td>
</tr>
<tr>
<td>
<label>Hobbies</label>
</td>
<td>
<label>
<input type="checkbox" checked> Cricket
</label>
<label>
<input type="checkbox"> Football
</label>
</td>
</tr>
<tr>
<td>
<label>Gender</label>
</td>
<td>
<label>
<input type="radio" value="f" name="gender"> Female</label>
<label>
<input value="m" type="radio" name="gender"> Male</label>
</td>
</tr>
<tr>
<td>
<label for="city">City</label>
</td>
<td>
<select id="city" name="city">
<option disabled selected>--Choose City--</option>
<optgroup label="Metros">
<option>New Delhi</option>
<option>Mumbai</option>
<option>Channai</option>
<option>Kolkata</option>
</optgroup>
<optgroup label="Others">
<option>Noida</option>
<option>Gurgram</option>
<option>Faridabad</option>
<option>Gaziabad</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>
<label>Address</label>
</td>
<td>
<textarea rows="4" cols="40"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit">
<input type="reset">
</td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>