HTML Forms - HTML - dyclassroom | Have fun learning :-)

To collect user data we use form in HTML. Some of the common form examples are login form, signup form, search form etc...

Data collected from a form is generally sent to the backend for processing.

Following is a sample search form.


<form method="GET" action="/url/of/the/script/file">
  <label>Search</label>
  <input type="text">
  <input type="submit">
</form>

Form Attributes

method

This is the method used to send data to the backend server. Most commonly used method is GET and POST.

action

Url of the backend script that will process the submitted data.

enctype

This attribute specifies in which form the browser will encode the data before sending it to the backend server.
Values for the enctype attribute:

application/x-www-form-urlencoded
This is the most commnly encoding type.
multipart/form-data
This is used to upload binary data in the form of files like image, video, audio, text file etc.

target

Specifies the frame or window where the backend server result will be displayed. Commonly used values for this attribute are _self, _blank and _parent

Form Controls

Following are the most commonly used form controls in HTML.

Text input
Radio button
Checkbox
Select options
File upload
Hidden fields
Reset and Submit button

Text input

We use 3 type of inputs in HTML namely,
single line text input
password input and
multiline text input using textarea.

Single line text input

<input type="text">

Attributes

type : For single line text input we set the type attribute to "text".

name : Used to give name to the input control that is then send to the server.

maxlength : The max number of characters that can be entered in the input field.

value : This holds the text value. Also used to set the initial value of the input control.

placeholder : To show example input value.

Email input

<input type="email">

Attributes

type : For email input we set the type attribute to "email".

name : Used to give name to the input control that is then send to the server.

maxlength : The max number of characters that can be entered in the email field.

value : This holds the email value. Also used to set the initial value of the input control.

Password input

<input type="password">

Attributes

type : For password input we set the type attribute to "password". The password we enter in this field is masked.

name : Used to give name to the input control that is then send to the server.

maxlength : The max number of characters that can be entered in the password field.

value : This holds the password value. Also used to set the initial value of the input control.

Textarea - multiline text input

<textarea rows="5" maxlength="100"></textarea>

Attributes

name : Used to give name to the input control that is then send to the server.

maxlength : The max number of characters that can be entered in the textarea.

value : This holds the text value. Also used to set the initial value of the input control.

rows : The number of rows for the text area.

cols : The number of columns for the text area.

placeholder : To show example input value.

Radio buttons

Radio buttons are used when we have to select only one option out of many options. The name attribute of the radio buttons is set to the same value.


<input type="radio" name="os" value="Apple OSX"> Apple OSX
<input type="radio" name="os" value="Microsoft Windows"> Microsoft Windows
<input type="radio" name="os" value="Linux Ubuntu"> Linux Ubuntu
<input type="radio" name="os" value="Others"> Others

Attributes

type : For radio buttons type is set to radio.

name : Used to give name to the input control that is then send to the server.

checked : Option that is selected by default.

value : The value that is selected.

In the following example "Others" is selected by default.

Checkbox

When we want to select more than one options in a form we use the checkbox. Following is an example of checkbox.


<input type="checkbox" name="os" value="Apple OSX"> Apple OSX
<input type="checkbox" name="os" value="Microsoft Windows"> Microsoft Windows
<input type="checkbox" name="os" value="Linux Ubuntu"> Linux Ubuntu
<input type="checkbox" name="os" value="Others"> Others

Attributes

type : For checkbox type is set to checkbox.

name : Used to give name to the input control that is then send to the server.

checked : Option that is selected by default.

value : The value that is selected.

Select option

To create drop down menu of options we use the select tag. This allows us to select one or more options from given list of options.

Single select option


<select>
  <option value="-"> -- select -- </option>
  <option value="Apple OSX"> Apple OSX </option>
  <option value="Microsoft Windows"> Microsoft Windows </option>
  <option value="Linux Ubuntu"> Linux Ubuntu </option>
  <option value="Others"> Others </option>
</select>

Multiple select option


<select multiple>
  <option value="Apple OSX"> Apple OSX </option>
  <option value="Microsoft Windows"> Microsoft Windows </option>
  <option value="Linux Ubuntu"> Linux Ubuntu </option>
  <option value="Others"> Others </option>
</select>

Attributes

name : Used to give name to the input control that is then send to the server.

multiple : To allow multiple select option.

Attributes for <option>

value : The selected option value.

selected : For selected option

File upload

We can upload files by setting the type of input tag to file. Following input file upload allows upload of only .gif, .jpg, .jpeg and .png files.


<input type="file" accept=".gif, .jpg, .png">

Attributes

name : Used to give name to the input control that is then send to the server.

accept : File type that is allowed for upload.

Value for the accept attribute

image/* To upload all type of images
audio/* To upload all type of audio
video/* To upload all type of video
file_extension To upload specific files.

Hidden input

To hide data from the user view we use the hidden input controls. The values of the hidden input control can later be sent to the server.


<form>
<input type="hidden" name="channel" value="UCaqGoweuUdGFGEJA3fl6slg">
<input type="text" name="youtube" value="yusufshakeel">
</form>

Attributes

name : Used to give name to the input control that is then send to the server.

type : To create hidden input control we set the type attribute to hidden.

value : The value that is set for the hidden input control.

Reset and Submit buttons

The reset and submit buttons are very common in HTML forms. The reset button when clicked, clears the form input fields. On the other hand, submit button when clicked submits the data of the form to the backend server.


<label>First name</label>
<input type="text" name="firstname" maxlength="64" value="Yusuf">
<br>

<label>Last name</label>
<input type="text" name="lastname" maxlength="64" value="Shakeel">
<br>

<input type="reset" value="Reset">

<input type="submit" value="Submit">