HTML Form and Form Elements and Attributes

Resources:

CodePen

DynamicFormInstruction

DynamicFormComplete

HTML Form Element

The HTML <form> element is the parent element that defines a form that is used to collect user input data using form elements.

<form>

   form elements goes here... (will be discussed later)

</form>

HTML Form Element Attributes

There are several attributes that are associated with the form element.

Form Attributes

The two major form attributes are the action and the method. The target attribute can also be used.

  • The action attribute defines the action to be performed when the form is submitted. This is typically a server-side script (PHP, ASP, CF). Typically, the form elements data is sent to a server when the user clicks the submit button. if the action attribute is missing, the action is set to the current page.
  • The method attribute defines the HTTP method (get or post) to be used when submitting the form data:
    • get method - is the default method. However, the data submitted will be visible in the page address field in a series of name/value pairs appended to the URL(e.g., mypage.html?form_element_name="form_element_value"). However, with the GET method:
      • The length of a URL is limited (about 3000 characters)
      • Should never be used to send sensitive data (e.g., credit card, social security name, etc.). Best use for query strings.
      • Useful for form submissions where a user wants to bookmark the result
    • post method - should always be used if the form data contains sensitive and the data is encrypted and cannot be seen on the page address field. With the POST method:
      • It has no size limitations and can be used to send large amounts of data.
      • Form submissions with POST cannot be bookmarked

        TIP: To help you remember the post method, remember this phrase: YOU GET THE MOST OUT OF POST.

  • The target attribute defines if the submitted result will open in a new browser tab or in the current window:
    • The default is "_self" which means the form will be submitted in the current window.
    • The "_blank" value is used to open the result in a new window.

<form action="my_form_script.php" method="get" target="_blank">

   form elements goes here...

</form>

HTML Form Elements

The HTML form elements are the children elements of the parent <form> tag. There are three major form elements (input, select, and text).

HTML Input Form Elements

The <input> element is the most important form element that can be displayed in several ways depending on the type attribute.

  • <input type="button">
  • <input type="checkbox">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="password">
  • <input type="radio">
  • <input type="reset">
  • <input type="submit">
  • <input type="text">

NOTES:

  • Most common input HTML form elements are in bold above.
  • Each input field must have a name attribute to be submitted. If the name attribute is omitted, the data for that input field will not be sent at all.
  • The input element is an empty element.

Below is a list of examples of the most common input HTML form types:

The <input type="text"> defines a one-line text input field. it is used with the <label> element along with the "for" and "id" attributes.

CODE VIEW:

<form action="my_form_script.php" method="get" target="_blank">

  <label for ="firstname">First Name:</label>
  <input type="text" name="firstname" id="firstname"><br>

  <label for ="firstname">Last Name:</label>
  <input type="text" name="firstname" id="firstname"><br>

</form>

 

NOTE; The "for" attribute is is used to associate the <label> form with the <input> form "id" attribute. Hence, they need to have the SAME name to create the association between the two.

DESIGN VIEW:


 

NOTE: The default width is 20 characters. However, this can be changed with an attribute.

Radio Buttons

The <input type="radio"> - defines a radio button for selecting only one choice of many with the type, name and value attributes. This concept is know as mutually exclusive.

CODE VIEW:

<form action="my_form_script.php" method="get" target="_blank">

<label for ="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname"><br>

<label for ="firstname">Last Name:</label>
<input type="text" name="firstname" id="firstname"><br><br>

<p>Gender:</p>
<input id="male" type="radio" name="gender" value="male"><label for="male">Male</label<br>
<input id = "female" type="radio" name="gender" value="female"><label for="female">Female</label>

</form>


NOTE: In order for a group of radio buttons to work properly, ALL of the name attributes has to have the SAME value.  Hence, the radio button must have TWO ASSOCIATIONS:

  • The <label> "for" attribute has to be the SAME as the <input> "id" attribute.
  • The name attribute has to be the SAME for all radio button in a given group.

DESIGN VIEW:




Gender:

 

 

NOTE: You can only select one option at a time.

Check Boxes

The <input type="checkbox"> defines a checkbox that let a user select ONE or MORE options.

CODE VIEW:

<form action="my_form_script.php" method="get" target="_blank">

<label for ="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname"><br>

<label for ="firstname">Last Name:</label>
<input type="text" name="firstname" id="firstname"><br><br>

<p>Gender:</p>
<input id="male" type="radio" name="gender" value="male"><label for="male"> Male</label<br>
<input id = "female" type="radio" name="gender" value="female"><label for="female"> Female</label><br/><br/>

<p>How do you get around town?</p>
<input type="checkbox" name="walk" value="walk"><label for="walk">I walk</label><br/>
<input type="checkbox" name="bike" value="bike"><label for="bike">I bike</label><br/>
<input type="checkbox" name="bus" value="bus"><label for="bus">I take a bus</label><br/>
<input type="checkbox" name="car" value="car"><label for="car">I drive my car</label><br/>
<input type="checkbox" name="train" value="train"><label for="train">I take a train</label>
</form>

 

DESIGN VIEW:




Gender:




How do you get around town?





Submit Button

The <input type="submit"> defines a button for submitting the form data to a form-handler that is typically a server script page to process the input data based on the form's action attribute.

NOTE: Unlike most of the value attributes that is used to send that value to a server, this value attribute is used to define the button label for both the submit button and the reset reset button that will be discussed next.

CODE VIEW:

<form action="my_form_script.php" method="get" target="_blank">

<label for ="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname"><br>

<label for ="firstname">Last Name:</label>
<input type="text" name="firstname" id="firstname"><br><br>

<p>Gender:</p>
<input id="male" type="radio" name="gender" value="male"><label for="male"> Male</label<br>
<input id = "female" type="radio" name="gender" value="female"><label for="female"> Female</label><br/><br/>

<p>How do you get around town?</p>
<input type="checkbox" name="walk" value="walk"><label for="walk">I walk</label><br/>
<input type="checkbox" name="bike" value="bike"><label for="bike">I bike</label><br/>
<input type="checkbox" name="bus" value="bus"><label for="bus">I take a bus</label><br/>
<input type="checkbox" name="car" value="car"><label for="car">I drive my car</label><br/>
<input type="checkbox" name="train" value="train"><label for="train">I take a train</label><br/><br/>

<input type="submit" value="Register">
</form>

 

DESIGN VIEW:




Gender:




How do you get around town?







Reset Button

The <input type="reset"> defines a reset button that will reset all form values to their default values:

CODE VIEW:

<form action="my_form_script.php" method="get" target="_blank">

<label for ="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname"><br>

<label for ="firstname">Last Name:</label>
<input type="text" name="firstname" id="firstname"><br><br>

<p>Gender:</p>
<input id="male" type="radio" name="gender" value="male"><label for="male"> Male</label<br>
<input id = "female" type="radio" name="gender" value="female"><label for="female"> Female</label><br/><br/>

<p>How do you get around town?</p>
<input type="checkbox" name="walk" value="walk"><label for="walk">I walk</label><br/>
<input type="checkbox" name="bike" value="bike"><label for="bike">I bike</label><br/>
<input type="checkbox" name="bus" value="bus"><label for="bus">I take a bus</label><br/>
<input type="checkbox" name="car" value="car"><label for="car">I drive my car</label><br/>
<input type="checkbox" name="train" value="train"><label for="train">I take a train</label><br/><br/>

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

<input type="reset" value="Clear Form">
</form>

 

DESIGN VIEW:




Gender:




How do you get around town?







Form Button

While you can create a button with the <button> element, a form button can be created with the <input type="button">.

CODE VIEW:

<form action="my_form_script.php" method="get" target="_blank">

<label for ="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname"><br>

<label for ="firstname">Last Name:</label>
<input type="text" name="firstname" id="firstname"><br><br>

<p>Gender:</p>
<input id="male" type="radio" name="gender" value="male"><label for="male"> Male</label<br>
<input id = "female" type="radio" name="gender" value="female"><label for="female"> Female</label><br/><br/>

<p>How do you get around town?</p>
<input type="checkbox" name="walk" value="walk"><label for="walk">I walk</label><br/>
<input type="checkbox" name="bike" value="bike"><label for="bike">I bike</label><br/>
<input type="checkbox" name="bus" value="bus"><label for="bus">I take a bus</label><br/>
<input type="checkbox" name="car" value="car"><label for="car">I drive my car</label><br/>
<input type="checkbox" name="train" value="train"><label for="train">I take a train</label><br/><br/>

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

<input type="reset" value="Clear Form"><br><br>

<input type="button" onclick="alert('More Info goes here...!')" value="More Info">
</form>

 

DESIGN VIEW:




Gender:




How do you get around town?









 

NOTE: If the More Info button is clicked, a dialog box will be opened.

Grouping Form Elements (Optional)

You can group related form elements together with the <fieldset> element which is used with the <legend> element that defines a caption for the fieldset elements.

CODE VIEW:

<form action="my_form_script.php" method="get" target="_blank">

<fieldset>
<legend>Personal information:</legend> 
<label for ="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname"><br>

<label for ="firstname">Last Name:</label>
<input type="text" name="firstname" id="firstname"><br><br>

<p>Gender:</p>
<input id="male" type="radio" name="gender" value="male"><label for="male"> Male</label<br>
<input id = "female" type="radio" name="gender" value="female"><label for="female"> Female</label><br/><br/>
</fieldset>

<p>How do you get around town?</p>
<input type="checkbox" name="walk" value="walk"><label for="walk">I walk</label><br/>
<input type="checkbox" name="bike" value="bike"><label for="bike">I bike</label><br/>
<input type="checkbox" name="bus" value="bus"><label for="bus">I take a bus</label><br/>
<input type="checkbox" name="car" value="car"><label for="car">I drive my car</label><br/>
<input type="checkbox" name="train" value="train"><label for="train">I take a train</label><br/><br/>

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

<input type="reset" value="Clear Form"><br><br>

<input type="button" onclick="alert('More Info goes here...!')" value="More Info">
</form>

 

DESIGN VIEW:

Personal information 


Gender:




How do you get around town?









Password Field

Input: Password Field

<input type="password"> defines a password field:

SPECIAL INSTRUCTI0N: Add the following code ABOVE the previous opening <form> tag.

CODE VIEW:

<form action="my_form_script.php" method="get" target="_blank">
    <fieldset>
        <legend>Login:</legend> 
         <label name="username" for="username">UserName:</label>
        <input type="text" name="username" id="username"><br>
        <label name="password" for="password">Password:</label>
        <input type="password" name="password" id="password"><br>
        <input type="submit" value="Login">
    </fieldset>
</form><br/><br/>

<form action="my_form_script.php" method="get" target="_blank">

<fieldset>
<legend>Personal information:</legend> 
<label for ="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname"><br>

<label for ="firstname">Last Name:</label>
<input type="text" name="firstname" id="firstname"><br><br>

<p>Gender:</p>
<input id="male" type="radio" name="gender" value="male"><label for="male"> Male</label<br>
<input id = "female" type="radio" name="gender" value="female"><label for="female"> Female</label><br/><br/>
</fieldset>

<p>How do you get around town?</p>
<input type="checkbox" name="walk" value="walk"><label for="walk"> I walk</label><br/>
<input type="checkbox" name="bike" value="bike"><label for="bike"> I bike</label><br/>
<input type="checkbox" name="bus" value="bus"><label for="bus"> I take a bus</label><br/>
<input type="checkbox" name="car" value="car"><label for="car"> I drive my car</label><br/>
<input type="checkbox" name="train" value="train"><label for="train"> I take a train</label><br/><br/>

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

<input type="reset" value="Clear Form"><br><br>

<input type="button" onclick="alert('More Info goes here...!')" value="More Info">
</form>

 

DESIGN VIEW:

Login: 


Personal information: 


Gender:

How do you get around town?









NOTE: When typing, the characters in a password field will be masked with asterisks or circles.

Style and Make Form Interactive (BONUS)

SPECIAL INSTRUCTI0N: Add the following style rules within a <style> element in the <head> element. Then, add the class to both forms parent tag (e.g., <form class="form_custom_width" action="my_form_script.php" method="get" target="_blank">

CODE VIEW:

<style>
   form_custom_width {width:250px;}
   #registrationForm {display:none;}
</style>


DESIGN VIEW:

Login: 


NOTE: Notice the first form width has changed to 250px and the second form has disappeared altogether because of the display:none rule.

SPECIAL INSTRUCTI0N: Add a <button> element between form elements with a onClick attribute set to a function and two line break elements.

CODE VIEW:

</form><br/><br/>
    <button onClick="showHideRegistration()">Register</button><br/><br/>
<form action="my_form_script.php" method="get" target="_blank">


CODE VIEW:

SPECIAL INSTRUCTI0N: Add id="registrationForm" to the second <form> element:

<form id="registrationForm" action="my_form_script.php" method="get" target="_blank">

CODE VIEW:

SPECIAL INSTRUCTI0N: ABOVE the closing </head> tag, add the following code within <script> element in the <head> tag:

<script>
function showHideRegistration()
{
//Create a toggle function
var registationForm = document.getElementById("registrationForm");
if (registationForm.style.display === "block") {
registationForm.style.display = "none";
} else {
registationForm.style.display = "block";
}
}
</script>
</head>


DESIGN VIEW:

Login: 




Personal information: 


Gender:




How do you get around town?









HTML5 Input Form Elements

HTML5 added several new input types. Types that are not supported by older web browsers, will behave as <input type="text">.

  • color
  • date
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

To see a complete list of all of the new HTML 5 Input Form Types, go to w3schools.

Select Form Element

The <select> element defines a drop-down list: It is used with the <option> elements which defines an option that can be selected.

Code View:

<p>States you have visited:</p>
<select name="select" id="select">
    <option value="La">Louisiana</option>
    <option value="Miss">Mississippi</option>
    <option value="Tx">Texas</option>
    <option value="Ca">California</option>
    <option value="Utah">Utah</option>
</select>

 

DESIGN VIEW:

States you have visited:

 

By default, the first item in the drop-down list is selected. To define a pre-selected option, add the selected attribute to the option:

CODE VIEW:

<p>States you have visited:</p>
<select name="select" id="select">
    <option value="La">Louisiana</option>
    <option value="Miss">Mississippi</option>
    <option value="Tx" selected>Texas</option>
    <option value="Ca">California</option>
    <option value="Utah">Utah</option>
</select>

 

DESIGN VIEW:

States you have visited:

 

NOTE: Notice Texas is the selected option instead of Louisiana.

To change the combo box to a List box add a size attribute to the select element to specify the number of visible values:

CODE VIEW:

<p>States you have visited:</p>
<select name="select" id="select" size="3">
    <option value="La">Louisiana</option>
    <option value="Miss">Mississippi</option>
    <option value="Tx" selected>Texas</option>
    <option value="Ca">California</option>
    <option value="Utah">Utah</option>
</select>

 

DESIGN VIEW:

States you have visited:

 

NOTE: Notice the the combo box has been converted to a three rows List box.

To allow the user to select multiple options add the multiple attribute to the option element. It is best practice to write instruction to the user on how to select multiple options.

CODE VIEW:

<p>States you have visited:</p>
<select name="select" id="select" size="3" multiple>
    <option value="La">Louisiana</option>
    <option value="Miss">Mississippi</option>
    <option value="Tx" selected>Texas</option>
    <option value="Ca">California</option>
    <option value="Utah">Utah</option>
</select>
<p>Press the CTRL/CMD button to select multiple options.</p>

 

DESIGN VIEW:

States you have visited:

Press the CTRL/CMD button to select multiple options.

NOTE: Press the CTRL/CMD key now will allow a user to select multiple options.

TextArea Form Element

Unlike the <input type="type /> is use to define a SINGLE line text field, the <textarea> element defines a MULTI-LINE input field along with the row and column attributes to define the height and width of the text area.

CODE VIEW:

<textarea name="message" rows="10" cols="30">
A text area is used to create a multi-line element.
</textarea>

 

DESIGN VIEW:

NOTE: You can pull on the right-box corner to resize the text area box.

HTML 5 Form Elements

HTML5 added the following form elements. However, newer elements may not be supported by older browsers

  • <datalist>
  • <output>

HTML 5 <datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input> element when data is entered. The list attribute of the <input> element, must refer to the id attribute of the <datalist> element. The datalist tag is not supported in Safari or IE9 or earlier,

NOTE: The "list" attribute is akin to the "for" attribute of the <input> element when using a <text> element and the list attribute is used to associate it with the "id" attribute of the the <datalist> element.

CODE VIEW:

<form action="my_form_script.php" method="get" target="_blank">
<p>What is your favorite color? (As you type value will be shown)</p>
<input list="colors">
<datalist id="colors">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
    <option value="Purple">Purple</option>
    <option value="Yellow">Yellow</option>
</datalist>
</form>

DESIGN VIEW:

What is your favorite color? (As you type value will be shown)

HTML 5 <output> Element

The <output> element represents the result of a calculation. It is not supported in Edge 12 or Internet Explorer or earlier.

CODE VIEW:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">

   <input type="range" name="b" value="50" /> +

   <input type="number" name="a" value="10" /> =

   <output name="result">60</output>

</form>

 

DESIGN VIEW:

+ = 60

HTML Attributes

There are a few HTML Attributes that has not been discussed:

  • value
  • readonly
  • disabled
  • size
  • maxlength

The value Attribute

The value attribute specifies the initial value for an input field:

CODE VIEW:

<form action="my_form_script.php" method="get" target="_blank">

<label for ="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" value="Cornelius"><br>

<label for ="firstname">Last Name:</label>
<input type="text" name="firstname" id="firstname"><br>

</form>

 

DESIGN VIEW:



The readonly Attribute

The readonly attribute specifies that the input field is read only and cannot be changed:

CODE VIEW:

<form action="my_form_script.php" method="get" target="_blank">

<label for ="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" value="Cornelius" readonly ><br>

<label for ="firstname">Last Name:</label>
<input type="text" name="firstname" id="firstname"><br>

</form>

 

DESIGN VIEW:



The disabled Attribute

The disabled attribute specifies that the input field is disabled and cannot be use or click on. Also, its value will not be submitted when the form is processed.

NOTE: Change readonly to disabled.

CODE VIEW:

<form action="my_form_script.php" method="get" target="_blank">

<label for ="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" value="Cornelius" disabled ><br>

<label for ="firstname">Last Name:</label>
<input type="text" name="firstname" id="firstname"><br>

</form>

 

DESIGN VIEW:



The size Attribute

The size attribute specifies the size (in characters) for the input field:

Remove disabled attribute and add size="40"

CODE VIEW:

<form action="my_form_script.php" method="get" target="_blank">

<label for ="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" value="Cornelius" size="40"><br>

<label for ="firstname">Last Name:</label>
<input type="text" name="firstname" id="firstname"><br>

</form>

 

DESIGN VIEW:



The maxlength Attribute

The maxlength attribute specifies the maximum allowed length for the input field and will not accept more characters.

NOTE: Change size="40" to maxlength="10"

CODE VIEW:

<form action="my_form_script.php" method="get" target="_blank">

<label for ="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" value="Cornelius" maxlength="10"><br>

<label for ="firstname">Last Name:</label>
<input type="text" name="firstname" id="firstname"><br>

</form>

 

DESIGN VIEW:



HTML 5 Attributes

HTML5 added the following attributes for the <input> element:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

HTML5 added the following attributes for the <form> element::

  • autocomplete
  • novalidate

For more examples of HTML 5 attributes, go to w3schools.