HTML Input Controls

Les Pinter


Button | Color | Date | DateTime | Email | FileUpload | Hidden | Image | Month | Number | Password |
Range | Radio | Search | Select dropdowns Submit | Text | TextArea Time | URL | Week

Introduction

If you're using web pages to display, enter or change data, you'll make heavy use of the input element. HTML 5 has hugely enhanced this element. Take a few minutes to master the various types. It will save you from wasting a lot of time reinventing the wheel.

Note that inputs have both an id and a name attribute. Id is used in JavaScript to manipulate the element; name is used in C# in the "action" page code-behind that runs on the server when the page is submitted. For example, if your form action> is "./AddMember.aspx", in the code-behind for AddMember.aspx you would retrieve the name that the user typed into input id="one" name="FirstName" as Request.Form["FirstName"]

With any type of input, you can use the "title=<ToolTip Text>" attribute to provide a hint when the user hovers the mouse over the element.

Input validation used to be the main reason for learning JavaScript. Validation is much easier in HTML 5. To demonstrate it, I've added a single style to this page:

<Style>
  input:invalid { border: solid 1px red; }
</Style>

If the required attribute is present within an element, it will appear with a red border. The border will turn black if a value is entered and the input matches any required pattern, either the default or the reged pattern provided if the type permits such a pattern, as with the email type). If any fields are invalid, the submit button won't submit.

Using for= to associate a label with an input

In many cases, an input needs to be identified using a caption that precedes it, e.g.    

First name:

One way to do this is by constructing a two-column table with the caption in the first column and the input field in the second column:


<table style="border: solid 1px black">
<tr>
<td>First name: </td>
<td><input type="text" size="30" ></td>
</tr>
</table>

However, it's often easier to simply prefix the input control with a Label using the for="id" attribute to associate the label with the control that follows:

<label for="one">Name:</label> <input type="text" id="one" size="30px">

This is especially useful with checkboxes and buttons, since it means you can check the box by clicking on the associated text instead of having to precisely position the mouse cursor over the checkbox or radiobutton.

Input types

Currently there are 20 input types, listed below. Each has its own set of attributes, some of which you may or may not ever need.

• Button

Example:

<input type="button" value="You send me" />

A button's "onclick" (all lower case) event can be used to perform actions in the browser. "onClick" triggers a method in the code-behind, which reloads the page (and any and all css links and scripts in the Head section. Big difference. In order to trigger the code-behind, runat="server" has to be included in the web form. If you add an asp:Button, runat="server" will be added automatically. It's not the same.

• Color

Example:

<input type="color" id="colorValue" />

Displays the system ColorPicker. No kidding. Returns a six-digit hexadecimal color value.

• Date

The Date input type provides several mechanisms for entering a date:

• DateTime

Like Date, but with the time included:

Example:


• Month

Example:


• Week

Example:


• Time

Example:


• Email

Example:


    <input
    type="email"
    placeholder="Les@Pinter.com"
    pattern=".+@pinter.com"
    size="30"
    required
    title="Must be a Pinter.com email address">

• Hidden

Hidden inputs are often used to pass values from one page to another without showing the value to the user. This may be the UserID collected during Login, for example.

Example:

  <input type="Hidden" value="" Id="UserID" Name="UserID" />

• Image

Used to display a button with an image, like 'Login';

Example:

  
  <input type="Image" src="./Login.gif" alt="Login button" height="24" width="95" />

• Number

Prevents entering letters or invalid characters; restricts the allowed range of values of a numeric input, sets the size of the increment step, and provides an up|down spinner

Example:

  
  <input type="number" min=0 max=10 step=.1 />

• Password

Masks the password entered with one asterisk per character typed. Note that you might want to also set autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" so that users won't be surprised at what they device thought they typed...

Example:

     <input type="password" minlength="6" validate />

• Range

This is the "slider" control that you may have seen. It generally needs a lot of CSS. Google "html range slider" for some cut-and-paste examples.

Example:

<input type="range" min="0", max="100" />
Value:

• Radio

Example:

Male Female
  <input type="radio" name="gender" value="Male" />Male
  <input type="radio" name="gender" value="Female" />Female

and to show which one was selected,

  for(var i = 0; i < form.gender.length; i++)
   { if(form.gender[i].checked) alert("selection: " + form.gender[i].value); }

• Reset

Resets (clears) all inputs to their original state (try it!):

Example:

Example:

<input type="search" name="q" />

• Submit

Submits a form to the url named in the action attribute of the form tag.

Example:

• Text

Used for normal text input.

Example:

• URL

This saves you a little JavaScript, since the input's border will stay red until a well-formed url, complete with "http://" prefix, is entered.

Example:

Other input elements

• SELECT - Dropdown lists

In addition, the <select> element provides a dropdown list that only lets the user select one option from a list that opens like a vertical accordion, then closes back up after the user makes a selection:

You can also declare a datalist, and then use it to populate an <input> of type list:

    <input list="browsers">
    <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>

• TextArea

The TextArea is an expandible, multi-line textbox that can be used to collect larger amounts of text. If the multiline attribute is set, your users can even enter carriage returns, but they have to know to use a TAB to leave the textarea.



<label for="txt">Comments:</label><br >
<textarea id="txt" multiline="true" height="200px" width="800px"></textarea>
        

Conclusion

Mastering these elements will allow you to ensure that your users enter valid input before their data gets to the processing code that will store it or otherwise make use of it.