Tag: forms

HTML Forms

HTML forms are used to pass data to a server either using get/post method.

A form can contain input elements like text fields, check-boxes, radio-buttons, submit buttons and more. A form can also contain select lists, text area and label elements.

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

<form>
.
input elements
.
</form>

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.

The most used input types are described below.

Text Fields

Text Fields a one-line input field that a user can enter text into

<input type="text" />

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

The above HTML code looks like below in a browser:

Form fields with input type text

Password Field

<form>
Password: <input type="password" name="pwd" />
</form>

The above code will look like below in the browser

Password field in form in browser

Note: The characters in a password field are masked (i.e, shown as asterisks or black dots). 

Radio Buttons

Radio buttons let a user select only one one of a limited number of choices.

<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>

Radio buttons in browser

Checkboxes

Checkboxes let a user select one or more options of a limited number of choices. For example selecting all the vehicles I own while filling a form.

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

Checkbox in browser

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 api/server defined in the action attribute usually does something with the received input and does generate appropriate response and pass it back to the client/user.

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

Form submit button in browser

If you type some characters in the text field above and click the “Submit” button, the browser will send your input to a page called “html_form_action.php”. In that page(php) you can access all the data received and process it accordingly.