HTML – Form Control Elements


What are the form elements ?

There are some form elements which controls the form while processing the form data.

Form control elements are used to get data from the user using HTML forms.

Why form controls used ?

Form controls are mainly used to get and process the User input in a specified manner.

This includes processing the input values from the user as per the request GET/POST.

What are the types of form control elements ?

There are different types of form controls listed below,

1. Input Text box

2. Checkboxes

3. Radio Box

4. Select Box

5. File Select

6. Hidden

7. Clickable Buttons


8. Submit and Reset Button

1. Input Text box

This gets the input from the user in a text box.

There are types of text input listed below,

1. Single-line text

2. Password

3. Multi-line text

HTML courses for beginners !!!

Click to Learn More about – HTML Tutorial for beginners

1. Single-line text

This is created by using HTML <input> tag.

This controls the user input which should be in a single line or this will have one line of user input.

Its used to get the user name, age, first name , last name etc.

Attributes used for Single-line text.

1. type

Defines the type of input control and for text input control it will be set to text.

2. name

Used to provide name to the control which is sent to the server to be recognised and get the value.

3. value

This is used to provide an initial value inside the control.

4. size

This allows us to specify the width of the text-input control in terms of characters.

5. max-length

This allows to specify the maximum number of characters a user can enter into the text box.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>Simple form with Single-line text</p>
                <form>
                        First name: <input type = "text" name = "fname" />
                        <br/><br/>
                        Last name: <input type = "text" name = "lname" />
                </form>
        </body>
</html>

Output :

2. Password

This is also created using HTMl <input> tag.

This is also a single-line text input.

Password type masks the character as soon as a user enters it.

Attributes used for password.

1. type

Defines the type of input control and for password input control it will be set to password.

2. name

Used to provide name to the control which is sent to the server to be recognised and get the value.

3. value

This is used to provide an initial value inside the control.

4. size

This allows us to specify the width of the text-input control in terms of characters.

5. max-length

This allows to specify the maximum number of characters a user can enter into the text box.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>Simple form with Single-line text and Password</p>
                <form>
                        User id : <input type = "text" name = "uid" />
                        <br/><br/>
                        Password : <input type = "password" name = "password" />
                </form>
        </body>
</html>

Output :

3. Multi-line text

This is created using HTML <textarea> tag.

This creates and allows the user to give details in many lines.

A text area with multiple lines are created for getting user input.

Attributes used for Multiple-Line Text Input

1. name

Used to provide a name to the control which is sent to the server to be recognised and get the value.

2. rows

Defines the number of rows of text area box.

3. cols

Defines the number of columns of text area box

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>Simple form with Multi-line text area</p>
                <form>
                        <textarea rows = "10" cols = "70" name = "desc">
                        </textarea>
                </form>
        </body>
</html>

Output :

2. Checkboxes


This is created by using <input> tag but type attribute is set to “checkbox”.

Checkboxes are used to select more than one option in the HTML forms.

Attributes used for Checkboxes.

1. type

Defines the type of input control and for checkbox input control it will be set to checkbox..

2. name

Used to provide a name to the control which is sent to the server to be recognised and get the value.

3. value

The value that will be used if the checkbox is selected.

4. checked

Set to checked if you want to select it by default.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>Simple form with Checkbox</p>
                <form>
                        <input type = "checkbox" name = "english" value = "on"> English
                        <br/><br/>
                        <input type = "checkbox" name = "tamil" value = "on"> Tamil
                        <br/><br/>
                        <input type = "checkbox" name = "maths" value = "on"> Maths
                        <br/><br/>
                        <input type = "checkbox" name = "science" value = "on"> Science
                        <br/><br/>
                        <input type = "checkbox" name = "biology" value = "on"> Biology
                        <br/><br/>
                        <input type = "checkbox" name = "history" value = "on"> History
                        <br/><br/>
                        <input type = "checkbox" name = "geography" value = "on"> Geography
                </form>
        </body>
</html>

Output :

Creating a website html !!!

Click to Learn More about – HTML Tutorial for beginners

3. Radio Box

This is created by using <input> tag but type attribute is set to “radio”.

Radio button is used to select one option among multiple options in the HTML forms.

Attributes used for Radio button.

1. type

Defines the type of input control and for radio input control it will be set to radio.

2. name

Used to provide a name to the control which is sent to the server to be recognised and get the value.

3. value

The value that will be used if the radio is selected.

4. checked

Set to checked if you want to select it by default.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>Simple form with Radio button</p>
                <form>
                        <input type = "radio" name = "subjects" value = "english"> English
                        <br/><br/>
                        <input type = "radio" name = "subjects" value = "tamil"> Tamil
                        <br/><br/>
                        <input type = "radio" name = "subjects" value = "maths"> Maths
                        <br/><br/>
                        <input type = "radio" name = "subjects" value = "science"> Science
                        <br/><br/>
                        <input type = "radio" name = "subjects" value = "biology"> Biology
                        <br/><br/>
                        <input type = "radio" name = "subjects" value = "history"> History
                        <br/><br/>
                        <input type = "radio" name = "subjects" value = "geography"> Geography
                </form>
        </body>
</html>

Output :


4. Select Box

This is created by using <select> and <options> tag.

This is a drop down box which provides options.


This lists down all various options in the form of drop down list.

This allows the user to select one or more options.

Attributes used for <select> tag.

1. name

Used to provide a name to the control which is sent to the server to be recognised and get the value.

2. size

This can be used to present a scrolling list box.

3. multiple

If set to “multiple” then allows a user to select multiple items from the menu.

Attributes used for <option> tag.

1. value

The value that will be used if an option in the select box box is selected.

2. selected

If selected is used, then this option should be the initially selected value when the page loads.

3. label

An alternative way of labelling options

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>Simple form with Select dropdown</p>
                <form>
                <select name = "dropdown">
                                <option value = "english" selected>English</option>
                                <option value = "tamil">Tamil</option>
                                <option value = "maths">Maths</option>
                                <option value = "science">Science</option>
                                <option value = "biology">Biology</option>
                                <option value = "history">History</option>
                                <option value = "geography">Geography</option>
                        </select>
                </form>
        </body>
</html>

Output :


5. File Select

This is created by using <input> tag but type attribute is set to “file”.

By using this option the user can upload a file to your webpage.

Attributes used for File.

1. name

Used to provide a name to the control which is sent to the server to be recognised and get the value.

2. accept

Defines the types of files that the server accepts.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>Simple form with File upload</p>
                <form>
                        <input type = "file" name = "fileupload" />
                </form>
        </body>
</html>

Output :

6. Hidden

This is created by using <input> tag but type attribute is set to “hidden”.

This is used to hide data inside the webpage which later on the hidden data will be pushed to the server.

This actually hides inside the HTML code and will not appear on the actual webpage.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>Simple form with Single-line text</p>
                <form>
                        First name: <input type = "text" name = "fname" />
                        <br/><br/>
                        Last name: <input type = "text" name = "lname" />
                        <br/><br/>
                        Age (hidden field value - 30) : <input type = "hidden" name = "lname" value="30"/>
                        <br/><br/>
                        Hobby : <input type = "text" name = "hobbby" />
                </form>
        </body>
</html>

Output :

7. Clickable Buttons

This is created by using <input> tag but type attribute is set to “button”.

This is used to create “Submit” , “Reset” , “Button” and “Image”, everything acts as a button.

1. Button

Button type creates a button which is used to trigger a client-side script when the user clicks that button.


2. Submit

Submit button is a button which automatically submits a form.

3. Reset

Reset button is a button which automatically resets form controls to their initial values.

4. Image

We can create image as background of the button.

Image is a type of a button used used to trigger a client-side script when the user clicks that button.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>My Webpage</title>
        </head>
        <body>
                <p>Simple form with Buttons</p>
                <form>
                        Simple Button : <input type = "button" name = "ok" value = "Yes" /><br/><br/>
                        Submit Button : <input type = "submit" name = "submit" value = "Submit" /><br/><br/>
                        Reset Button : <input type = "reset" name = "reset"  value = "Reset" /><br/><br/>
                        Image Button : <br/><input type = "image" name = "imagebutton" width="100px" height="100px" src = "https://secureservercdn.net/192.169.221.188/s30.e0b.myftpupload.com/wp-content/uploads/2020/06/HTML-PixTeller-1-2.png" />
                </form>
        </body>
</html>

Output :