How to Create HTML Forms

Last Updated: June 27, 2024By

 

HTML Form

 

 

What is HTML Form

 

HTML Forms are required to collect all kinds of user inputs, such as name, contact details, email address, phone numbers, and create a survey.

For Example: If anyone visits your site and wants to search for some product that you are selling so for this you need to create a search box. Also, a user wants to connect with you by filling the contact us form.

HTML Form Tags

 

 

Tag

Description

<form>

It defines an HTML form to enter inputs by the used side.

<input>

It defines an input control.

<textarea>

It defines a multi-line input control.

<label>

It defines a label for an input element.

<fieldset>

It groups the related elements in a form.

<legend>

It defines a caption for a <fieldset> element.

<select>

It defines a drop-down list.

<optgroup>

It defines a group of related options in a drop-down list.

<option>

It defines an option in a drop-down list.

<button>

It defines a clickable button.

<datalist>

It specifies a list of pre-defined options for input control.

<keygen>

It defines a key-pair generator field for forms.

<output>

It defines the result of a calculation.

 

 

HTML Form Syntax

 

<form action=“DataSaveLocationURL” method=“get|post”>
 //input controls e.g. textfield, textarea, radiobutton, button
 </form>

 

 

The <label> Element

 

The <label> tag represents a label for many form elements. It explains, for which the field is used. The for the attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

     <form action=”” method=”get”>
 <label for=“username”>Enter Username : </label>
 </form>

 

 

Input Element

The <input type=”text” value=””> defines a single-line input field for text input. It is used to create form fields, to take input from the user. The type attribute can be of the type text field, password field, checkbox, radio button, submit button, reset button, file select box, etc.

Tag

Description

type=”text”

Displays a single-line text input field

type=”radio”

Displays a radio button (for selecting one of many choices)

type=”checkbox”

Displays a checkbox (for selecting zero or more of many choices)

type=”submit”

Displays a submit button (for submitting the form)

type=”button”

Displays a clickable button

 

 

   <form>
 <label for=“username”>Enter Username : </label>
 <input type=“text” name=“username” id=“username”>
 </form>

 

Enter Name

 

Password Field

Password fields are similar to text fields. The only difference is; characters in a password field are masked, i.e. they are shown as asterisks or dots.

 

    <form>
<label for=“username”>Enter Username : </label>
<input type=“text” name=“username” id=“username”>
<br/>
<label for=“user-pwd”>Password:</label>
<input type=“password” name=“user-password” id=“user-pwd”>
</form>

 

 

User Name and Password

 

Radio Buttons

Radio buttons are used to let the user select exactly one option from a pre-defined set of options. The name of a group of radio buttons should be equal.

    <form>
 <input type=“radio” id=“male” name=“gender” value=“male”>
 <label for=“male”>Male</label><br>
 <input type=“radio” id=“female” name=“gender” value=“female”>
 <label for=“female”>Female</label><br>
 <input type=“radio” id=“other” name=“gender” value=“other”>
 <label for=“other”>Other</label>
 </form>

 

Radio button

 

Checkboxes

Checkboxes let a user select NONE or MORE options of choices. The name for a group of checkboxes should same.

    <form>
 <input type=“checkbox” name=“department” id=“Sports”>
 <label for=“Sports”>Sports</label>
 <input type=“checkbox” name=“department” id=“Other”>
 <label for=“Other”>Other</label>
 </form>

 

Check Box

 

Textarea

Textarea is a multiple-line text input control that permits a user to enter more than one line of text

    <form>
<label for=“address”>Address:</label>
<textarea rows=“3” cols=“30” name=“address” id=“address”>
        </textarea>
</form>
 

Address

 

 

Select Boxes

A select box is a dropdown list of options that allows users to select one or more options from a pull-down list of options. Select box is created using the <select> element and <option> element.

    <form>
 <label for=“state”>State:</label>
 <select name=“state” id=“state”>
 <option value=“Odisha”>Odisha</option>
 <option value=“Other”>Other</option>
 </select>
 </form>

 

State Odisha

 

Submit and Reset Buttons

The <input type=”submit”> defines a button for submitting the form data to a form-handler. and type=”reset” will reset your form fields.

    <form>
<input type=“submit” value=“Submit”>
<input type=“reset” value=“Reset”>
</form>
 

Submit Button

 

The complete Form Code

    <form>
<label for=“username”>Enter Username : </label>
<input type=“text” name=“username” id=“username”>
<br />
<label for=“user-pwd”>Password:</label>
<input type=“password” name=“user-password” id=“user-pwd”>
<br />
<input type=“radio” id=“male” name=“gender” value=“male”>
<label for=“male”>Male</label><br>
<input type=“radio” id=“female” name=“gender” value=“female”>
<label for=“female”>Female</label><br>
<input type=“radio” id=“other” name=“gender” value=“other”>
<label for=“other”>Other</label>
<br />
<input type=“checkbox” name=“department” id=“Sports”>
<label for=“Sports”>Sports</label>
<input type=“checkbox” name=“department” id=“Other”>
<label for=“Other”>Other</label>
<br />
<label for=“address”>Address:</label>
<textarea rows=“3” cols=“30” name=“address” id=“address”></textarea>
<br/>
<label for=“state”>State:</label>
<select name=“state” id=“state”>
<option value=“Odisha”>Odisha</option>
<option value=“Other”>Other</option>
</select>
<br/><br/>
<input type=“submit” value=“Submit”>
<input type=“reset” value=“Reset”>
</form>
 

 

HTMl Form

 

Video Tutorial

 

 

 

editor's pick

latest video

news via inbox

Nulla turp dis cursus. Integer liberos  euismod pretium faucibua

Leave A Comment

you might also like