How to create a form in html

Form in HTML has referred to a printed document that contains spaces for you to fill in information.

What is HTML Form?

HTML borrows the concept of a form to refer to different elements that allow you to collect information from visitors to your site.

Whether you are adding a simple search box to your website or you need to create more complicated insurance applications, HTML forms give you a set of elements to collect data from your users.

Form fields have been an integral part of the web for decades. Forms on the web are how we get things done. We log into sites through forms, we buy things through forms, request a search, add content to a site.

These interactions all happen through form elements, or they should happen through semantic form elements and not through divs and spans.

By using HTML form elements we tap into the power that’s built into the browser.

The HTML <form> element is used to create an HTML form for user input:

<form>
.
form controls
.
</form>

Form structure

<form> Form controls live inside a <form> element. This element should always carry the action attribute and will usually have a method and id attribute too.

action Every <form> element requires an action attribute. Its value is the URL for the page on the server that will receive the information in the form when it is submitted.

method Forms can be sent using one of two methods: get or post.

id  the value is used to identify the form distinctly from other elements on the page (and is often used by scripts — such as those that check you have entered information into fields that require values)

Form in HTML: types of form controls

There are several types of form controls that you can use to collect information from visitors to your site.

Text input (single-line)

Used for a single line of text such as email addresses and names.

<input type="text">

name attribute: When users enter information into a form, the server needs to know which form control each piece of data was entered into.

size attribute: not be used on new forms. It was used in older forms to indicate the width of the text input (measured by the number of characters that would be seen)

maxlength attribute: You can use the maxlength attribute to limit the number of characters a user may enter into the text field.

Password input

Like a single line text box but it masks the characters entered.

<input type="password">

It can also carry the name, size and maxlength attributes like the the single-line text input.

Text area (multi-line)

For longer areas of text, such as messages and comments

<textarea rows="10" cols="30">
</textarea>

The rows attribute specifies the visible number of lines in a text area.

The cols attribute specifies the visible width of a text area.

Radio buttons

For use when a user must select one of a number of options.

<input type="radio">

name: The name attribute is sent to the server with the value of the option the user selects.

value: The value attribute indicates the value that is sent to the server for the selected option. The value of each of the buttons in a group should be different (so that the server knows which option the user has selected).

checked: The checked attribute can be used to indicate which value (if any) should be selected when the page loads. The value of this attribute is checked. Only one radio button in a group should use this attribute.

Checkboxes

When a user can select and unselect one or more options.

<input type="checkbox">

It can also carry the name, value attributes like the the Radio buttons.

Drop-down boxes

When a user must pick one of a number of options from a list.

<select>
  <option>Volvo</option>
  <option>Saab</option>
  <option>Fiat</option>
  <option>Audi</option>
</select>

The <option> element is used to specify the options that the user can select from. The words between the opening <option> and closing </option> tags will be shown to the user in the drop down box.

value The <option> element uses the value attribute to indicate the value that is sent to the server along with the name of the control if this option is selected.

Submit buttons

To submit data from your form to another web page.

<input type="submit">

The form-handler is typically a file on the server with a script for processing input data. The form-handler is specified in the form’s action attribute.

Labelling Form Controls

Each form control should have its own <label> element as this makes the form accessible to vision-impaired users.

The <label> element can be used in two ways. It can:

1. Wrap around both the text description and the form input (as shown on the first line of the example to your right).

2. Be kept separate from the form control and use the for attribute to indicate which form control it is a label for (as shown with the radio buttons).

For

The for attribute states which form control the label belongs to. Note how the radio buttons use the id attribute. The value of the id attribute uniquely identifies an element from all other elements on a page

Registration form in html – example

<form action="/action_Registration.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="You name"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="You lastname"><br>
  <label for="password">Password:</label><br>
  <input type="password" id="password" name="password" value="123"><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="submit" value="Submit">
</form>

Leave a Reply