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.

AttributeDescription
nameIt specifies the name of the text field
typeIt indicates the type of input control
valueIt refers to the contents of the text field
Default valueIt indicates the default value of the text field
sizeIt allows to specify the width of the text-input control in terms of characters
maxlengthIt 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.

AttributeDescription
nameIt specifies the name of the select control
sizeThis can be used to present a scrolling list box
multipleIt specifies that multiple option can be selected at the same time by clicking CTRL key
selectedIt 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>Maths</option>
                <option value="Physics">Physics</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.

AttributeDescription
nameIt specifies the name of the text area
valueIt specifies the contents of the text area
default valueIt specifies the default value of the text area
rowIt specifies the number of rows in the text area
colsIt 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.

AttributeDescription
submitIt creates a button that automatically submits a form
resetIt automatically resets form controls to their initial values
buttonIt is used to trigger a client-side script when the user clicks that button
imageIt 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>