Form Tags
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Tags in HTML</title>
</head>
<body>
<header>
<h1>Understanding Form Elements</h1>
</header>
<form action="" method="post">
<h3>This is a Text field with readonly option </h3>
<label for="student id"> Student ID </label>
<input type="text" name="student id" readonly>
<h3>This is a Text field with hidden option </h3>
<label for="student id"> Student ID </label>
<input type="text" name="student id" hidden>
<h3>This is a Text field with place holder option</h3>
<label for="name"> Student Name </label>
<input type="text" name="name" maxlength="10" placeholder="Your name...">
<h3>This is a Date field</h3>
<label for="birth date"> Date of Birth </label>
<input type="date" name="birth date" >
<h3>This is a Number field</h3>
<label for="phone"> Phone No </label>
<input type="number" name="phone">
<h3>This is an Email field</h3>
<label for="email"> Email </label>
<input type="email" name="email" >
<h3>This is a Password field</h3>
<label for="password"> Password </label>
<input type="password" name="password">
<h3>This is a Radio field</h3>
<label for="gender"> Gender</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
<h3>This is a Checkbox field</h3>
<label for="language">Languages Known</label>
<input type="checkbox" name="language" id="English" value="English">
<label for="English">English</label>
<input type="checkbox" name="language" id="Hindi" value="Hindi">
<label for="Hindi">Hindi</label>
<input type="checkbox" name="language" id="Tamil" value="Tamil">
<label for="Tamil">Tamil</label>
<h3>This is a Dropdown/List field</h3>
<label for="class">Class</label>
<select name="class" id="class">
<option value="Class 1"> Class 1 </option>
<option value="Class 2"> Class 2 </option>
<option value="Class 3"> Class 3 </option>
<option value="Class 4"> Class 4 </option>
</select>
<h3>This is a Range field</h3>
<label for="grade"> Grade </label>
<input type="range" id="grade" name="grade" min="0" max="10" value="9">
<h3>This is a Text Area field</h3>
<label for="identification"> Identification Marks </label>
<textarea name="identification" cols="50" rows="5"></textarea>
<h3>This is a File field</h3>
<label for="photo"> Photo upload </label>
<input type="file" name="photo">
<h3>This is a Button </h3>
<input type="submit" value="Submit Student Details">
</form>
</body>
</html>