HTML Form tag

HTML forms are used to pass data to a server .An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.

The <form> tag is used to create an HTML form:


input elements


Here are some of the most commonly used form tags in HTML:

HTML Forms – The Input Element

The most important form element is the <input> element.

The <input> element is used to select user information .An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more.

  1. Text Fields

<input type=”text”> defines a one-line input field that a user can enter text into:

First name: <input type=”text” name=”firstname”><br>
Last name: <input type=”text” name=”lastname”>

Bottom of Form

Note: The form itself is not visible. Also note that the default width of a text field is 20 characters. 

  • Password Field

<input type=”password”> defines a password field:

Password: <input type=”password” name=”pwd”>

Bottom of Form

Note: The characters in a password field are masked (shown as asterisks or circles).

  • Radio Buttons

<input type=”radio”> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:

<input type=”radio” name=”sex” value=”male”>Male<br>
<input type=”radio” name=”sex” value=”female”>Female

  • Checkboxes

<input type=”checkbox”> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.

<input type=”checkbox” name=”vehicle” value=”Bike”>I have a bike<br>
<input type=”checkbox” name=”vehicle” value=”Car”>I have a car

  • Submit Button

<input type=”submit”> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page specified in the form’s action attribute. The file defined in the action attribute usually does something with the received input:

<form name=”input” action=”html_form_action.asp” method=”get”>
Username: <input type=”text” name=”user”>
<input type=”submit” value=”Submit”>

The textarea

<textarea>….</textarea> tag is used to create a text area box.

this textarea is 40 ‘cols’ wide
and 10 ‘rows’ in height

the drop down menu

sometimes known as a pull down menu uses <SELECT> and <OPTION> tags

Top of Form

Eggs Pasta Sugar Cheese Bread Milk

Bottom of Form

a ‘name’ is given to the <SELECT> tag and a value is applied to each <OPTION> tag


Note that one of the items on the list is ‘SELECTED’ otherwise the default selected option would be the top one (Eggs)

It’s simple to transform the drop menu into a scrolling menu by adding a size to the <SELECT> tag

the<SELECT> tag should have a closing tag </SELECT>

Leave a comment