HTML Form
HTML Form
A Form contains different types of input fields to store different types of data such as user-name, user-password, user email-id, phone number, address, etc. User data would be send to the server by HTML Form for the further processing.
The <input> element is used for every input type of element. Using type attribute, you can add different kinds of input fields in a form such as checkbox, radio button, button, text, etc.
Example
Syntax:
<form>
<label>
Name: <input type="text">
</label>
<label>
Email: <input type="email">
</label>
<label>
Username: <input type="text">
</label>
<label>
Password: <input type="password">
</label>
<input type="submit" value="Submit">
</form>
The <form> </form> tag is the main wrapper of a form and it contains all the input fields as you have seen in above example.
Input Fields & Attributes
Input fields depend on ‘type’ attribute. Let’s see some basic examples.
Text
‘<input type=”text”>’, it is a text input field for text type content.
Syntax:
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> </form>
Output:
Password
‘<input type=”password”>’, it is a password input field for password type text.
Syntax:
<form> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br> <label for="pswd">Password:</label><br> <input type="password" id="pswd" name="pswd"> </form>
Output:
‘<input type=”email”>’, it is a email input field for email type text.
Syntax:
<form> <label for="email">Enter email:</label> <input type="email" id="email" name="email"> </form>
Output:
File
‘<input type=”file”>’, it is a file input field to send the file such as zip, image, .txt, etc. to the server. In this, we add a clickable text to select file from your PC. When you click on that text, you are able to select any file from your PC.
Syntax:
<form> <label for="choosefile">Choose a file:</label> <input type="file" id="chossefile" name="choosefile"> </form>
Output:
When you will click the button “Choose File”, the window would be open as you can see i the below image.
Submit
‘<input type=”submit”>’, it is a submit input field for submit button. When you have done filling the form, click submit button to send the information from the form to the server for further processing.
Syntax:
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="Jack"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Sparrow"><br><br> <input type="submit" value="Submit"> </form>
Output:
Reset
‘<input type=”reset”>’, it is a reset input field for reset button. If you filled wrong information in the form, click reset button to remove the wrong info from the input fields and get the blank form to fill again.
Syntax:
<form> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="Jack"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="Sparrow"><br><br> <input type="submit" value="Submit"> <input type="reset"> </form>
Output:
Radio
‘<input type=”radio”>’, radio button is for options for you to select only one option from many.
Syntax:
<h1>What is your option?</h1> <form> <input type="radio" id="fronend" name="fav_language" value="Font-end"> <label for="frontend">Front-end</label><br> <input type="radio" id="backend" name="fav_language" value="Back-end"> <label for="backend">Back-end</label><br> <input type="radio" id="fullstack" name="fav_language" value="Full Stack"> <label for="fullstack">Full stack</label> </form>
Output:
Tel
‘<input type=”tel”>’, it contains telephone/mobile number. You can enter your mobile number only.
Syntax:
<form>
<label for="phone">Please enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
</form>
Output
