form: This tag is used to start making a form
label: This tag is used to define a label for form element
input: This tag is used to get input data from the form
button: This tag is used to create a button which can be click to perform some action
select: This tag is used to create a drop-down selectable list
textarea: This tag is used to create a bigger text input field to take input from users
fieldset: This tag is used to group simillar type of fields
legend: This tag is used to caption the fieldset element
datalist: It is used to specify pre-defined list options for input control
output: This tag is used to display the output of the performed operation
option: This tag is used to define options in the dropdown list.
Following is the hierarchy required for the tags:
- form is created first inside the body to start making the form.
- rest all options can be defined anywhere inside the form element except
- option needs to be present inside a tag where options are available
Code
<!doctype html>
<head>
<title>Practical 6</title>
</head>
<body>
<div class="row">
<div class="col">
<img src="https://shooliniuniversity.com/assets/images/logo.png" style="width:100px;
height:50px;">
</div>
<div class="col" style="margin-left: -20%;">
<h1 style="font-size: 50px;">Practical 6</h1>
</div>
</div>
<form action="#">
<fieldset>
<legend>Simple inline Login Box</legend>
<label>Username</label>
<input type="text" name="username" />
<label>Password</label>
<input type="password" name="password" />
<label>Page</label>
<select name="location" id="location">
<option value="home">Homepage</option>
<option value="dash">Dashboard</option>
</select>
<label for="work">Got Work?</label>
<input list="works" name="work" id="work">
<datalist id="works">
<option value="Yes">
<option value="No">
<option value="Undecided">
</datalist>
<input type="submit" value="Login" name="submit" class="submit" />
</fieldset>
</form>
</body>
</html>
Output
