HTML Form Elements

Here you will learn some important HTML form elements. These elements are also known as controls in programming language.

Input

<input> is the fundamental form element for gathering user information through forms. This control is used for items that require only one line of user input, such as name, password etc.

Attribute Description
name It specifies the name of the text field
type It indicates the type of input control
value It refers to the contents of the text field
Default value It indicates the default value of the text field
size It allows to specify the width of the text-input control in terms of characters
maxlength It specifies the maximum number of characters that can be entered in text field

Example

<!doctype html>  
<html>
 
    <head> 
       <title>Input Control</title> 
    </head>
    
    <body> 
        <form>
            <input type="text" name="firstname"> 
        </form>
    </body>

</html>

Select

Select field is used to provide predefined list of items to the user. The user can choose one or multiple options from the list depending upon the type of list.

<select> tag is used to create a list and <option> tag creates an item in the list.

Attribute Description
name It specifies the name of the select control
size This can be used to present a scrolling list box
multiple It specifies that multiple option can be selected at the same time by clicking CTRL key
selected It specifies that the current option is selected

Example

<!doctype html>  
<html>
 
    <head> 
        <title>Select Control</title> 
    </head>
  
    <body> 
        <form>
            <select name="languages">
                <option value="Maths" selected>HTML</option>
                <option value="Physics">CSS</option>
            </select>
        </form>
   </body>

</html>

Text Area

Text area is similar to text box but it may consist of multiple rows. It is used to get lengthy input from the user like comments and suggestions etc.

<textarea> tag is used to create text area in a form.

Attribute Description
name It specifies the name of the text area
value It specifies the contents of the text area
default value It specifies the default value of the text area
row It specifies the number of rows in the text area
cols It specifies the number of columns in the text area

Example

<!doctype html>  
<html>
 
    <head> 
        <title>Text Area</title> 
    </head>
  
    <body> 
        <form>
            <textarea name="comment" rows="10" cols="30">
                HTML stands for Hyper Text Markup Language. It is used to design web pages using markup language.
            </textarea>
        </form>
    </body>

</html>

Button

<button> is a HTML element which represents a clickable button. It can be used anywhere in a document (so in form) where simple, standard button functionality is needed.

Attribute Description
submit It creates a button that automatically submits a form
reset It automatically resets form controls to their initial values
button It is used to trigger a client-side script when the user clicks that button
image It creates a clickable button but we can use an image as background of the button

Example

<!doctype html>  
<html>
 
    <head> 
        <title>Button</title> 
    </head>
  
    <body> 
        <button type="button">Click Me!</button>
    </body>

</html>