<DAY-8> Web Development | Love Babbar’s Course
This is an Introduction to form. We will understand form elements and their uses.
Table of Contents
- What is form?
- Form example 1
- Form example 2
- Various Input Types
What is form?
A form is a structure that is used to collect data. The data is information from the user collected via various tags called form elements.
This dummy form consists of text inputs and a submit button. Let’s take a deep look at its code.
!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>
<form>
<label for="email">Enter email ID</label>
<input type="text" id="email">
<br />
<br />
<label for="password">Enter Password</label>
<input type="text" id="password">
<br />
<br />
<input type="submit" value="Submit ">
</form>
</body>
</html><form> is used to create the structure of the form in HTML.
<input> is an element through which input is entered. It can be displayed in various ways. We need to assign a type to every input so that the kind of input required is known. Apart from that input tag also has id and name attributes. “id ” is unique for an element in the whole webpage. It is a good practice to assign “name” for better understanding.
<label> is used to create a label. A label shows what kind of data needs to be displayed. The for attribute of label and id attribute of input must have same value so that they are linked together. Linking the input type with label allows us to click on the label when the input symbols are too small to be selected (like in radio buttons).
We can see that for attributes of email and password’s label tags are similar to their respective input tag’s id attribute’s value.
The type= “text” defines that it is a textbox meant for entering text.
The type= “submit” specifies that the data entered in the form is sent to the server for further processing and it creates a button to do so.
The value= “submit” is the text that appears on the button. If we change the value as
<input type="submit" value="Subscribe">The output will become
Form example 1
<!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>Form 1</title>
</head>
<body>
<form>
<label for="email">Enter email ID</label>
<input type ="text" id ="email" placeholder="abc@email.com">
<br/> <br/>
<label for="password">Enter Password</label>
<input type="text" id="password">
<br/> <br/>
<!--button-->
<input type="submit" value="Subscribe">
<button>Click here</button>
</form>
</body>
</html>Doing certain modifications in the previous example we have added a faded text in the “Enter email ID” block and another button which has the text “click here”
The faded greyish text that appears on most of the text fields for reference is called a placeholder. It is used to provide a hint as to which kind of input needs to be entered.
Another way to create a button is by using the <button> tag. It has a very simple syntax.
<button>Text to appear on button</button>Form example 2
<!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>2form</title>
</head>
<body>
<form >
<fieldset>
<legend>HTML dummy form</legend>
<label for="datepicker">Choose Date: </label>
<input type="date" id="datepicker">
<br /> <br />
<label for="selector1">Choose your dish</label>
<select name="dishes" id="selector1">
<option value="maggie">Maggie</option>
<option value="kurkure">kurkure</option>
<option value="toast">toast</option>
</select>
<br /> <br />
<button>This is a button</button>
<br /> <br />
<label for="multilinetext">Text Field</label>
<textarea name="textarea1" id="multilinetext" cols="15" rows="10"
placeholder="enter text "> </textarea>
</fieldset>
</form>
</body>
</html><fieldset>
Whenever we wish to group elements in a HTML form, we use <fieldset> tag. The box that covers the entire form is fieldset (Here, we have grouped the whole form).
<legend>
<legend> tag is used to give a title or caption to the fieldset. Here, “HTML dummy form” is the legend text.
<input type = “date”>
This input type generates a calendar, in which we can provide a date input in dd-mm-yyyy format.
<select>
<select> tag is used to generate a dropdown menu. We can provide various options using <option> tag.
<textarea>
To take a multiline input we use <textarea> tag. We can specify the number of columns and rows as its attribute. Placeholder is also one of the attribute of <textarea>.
Various Input Types
<input type = “text” >
This is the simplest input type we see across the web. It is a textfield where the input is text.
<!--code-->
<label for="textfield1">Textfield: </label>
<input type="text" name="text field hai" id="textfield1">
<input type = “submit” >
This is the method to create a button. We also saw creating a button through <button> tag. The value attribute shows the text to be printed on the button.
<!--code-->
<label for="button1"></label>
<input type="submit" name="button" id="button1" value="subscribe"> 
<input type= “radio”> (HW)
This creates radio buttons. Radio buttons are those circular buttons you must have come across in any of the form.
<!--code-->
<label for="radio1">Male</label>
<input type="radio" name="button" id="radio1" >
<br />
<br />
<label for="radio2">Female</label>
<input type="radio" name="button" id="radio2">
<br />
<br />
<label for="radio3">Others</label>
<input type="radio" name="button" id="radio3">
<br />
<br />
Note that in the above radio buttons, we can only choose one of them. If we want to choose multiple options we will have to keep the value of name attribute distinct.
<!--code-->
<label for="radio1">Male</label>
<input type="radio" name="button1" id="radio1" >
<br />
<br />
<label for="radio2">Female</label>
<input type="radio" name="button2" id="radio2">
<br />
<br />
<label for="radio3">Others</label>
<input type="radio" name="button3" id="radio3">
<br />
<br />
<input type= “checkbox”>
This creates a checkbox in the form.
<!--code-->
<label for="checkbox1">English</label>
<input type="checkbox" name="button4" id="checkbox1">
<br />
<br />
<label for="checkbox2">Hindi</label>
<input type="checkbox" name="button4" id="checkbox2">
<br />
<br />
<input type= ”file”>
We can take input through a file in user’s device using this input type.
<!--code-->
<label for="fileSelect1">Upload</label>
<input type="file" name="filechoose" id="fileSelect1">
On clicking “Choose File”, the following window appears
<input type= ”image”>
We use this input type when we want an image to act as a button. For adding an image , download and save the image in the same folder as your .html file.
<!--code-->
<input type="image" name="iconimage" id="image1"
alt="ICON IMAGE HAI" src="icon.png" width="30" height="30" >Here, the image I downloaded has the name “icon.png”. We can set attributes such as width, height, and alt. alt is the alternative text that appears on the place of the image in case it fails to load.
<input type=”password”>
We have used “text” as input type when we needed a password input in the firstmost example but the drawback with this type is that we can see the text we are typing and the password must be hidden. Using “password” as input type does the work.
<!--code-->
<label for="password1"> Enter Password</label>
<input type="password" name="password" id="password1" >
<input type= ”date”>
As already discussed, it generates a calendar, in which we can provide a date input in dd-mm-yyyy format.
<!--code-->
<label for="datepicker">Pick a date</label>
<input type="date" name="calendar" id="datepicker">
This was the overview of lecture 8, hope it helps! If there are any doubts or corrections please feel free to reach me via responses.
