HTML - Input Tags

Input fields come in several flavors including checkboxes, text fields, radios, and form submission buttons. The <input /> tag does not require a closing tag and is thus an "all in one" tag.

HTML - The Type Attribute

To specify one type of input tag from another we set the type attribute to one of the following values.

• "text"
• "password"
• "checkbox"
• "radio"
• "submit"
• "reset"

HTML - Text Fields and Password Fields

You have seen many of these types of input forms throughout the internet.

<input type="text" />
<input type="password" />

Text Fields and Passwords:

HTML - Checkboxes

Checkboxes allow the user to select multiple choices for a single question. A type of "check all that apply" question is best answered using a checkbox.

<input type="checkbox" />
<input type="checkbox" /><input type="checkbox" />

Checkboxes:

HTML - Radios

Radios are best used in "multiple choice" type quizzes and questionaires. Where the user is only permitted to select one answer to a question.

<input type="radio" />
<input type="radio" /><input type="radio" />

Radios:

HTML - Submit Buttons

Setting an input type to "submit" specifies a very unique button. When pressed, the button activates the action of the form whatever that may be. Most often times this is some sort of server side scripting file or a javascript function.

Since we are creatting a submission button. We need to introduce a new attribute, the value attribute. Anyword(s) specified as the value will be displayed on our button. Often it is best to stick with "Submit" or "Continue". Boring, yet effective.

<input type="submit" value="Submit" />
<input type="submit" value="Continue Please!" />

Submit Buttons:

HTML - Reset Buttons

The final type of input is the reset button. Setting the type to reset will place a button within your form to reset each field when clicked. Users enjoy having a "start over" button such as the reset button in case they begin filling out the wrong information in a major way.

<input type="reset" value="Reset Fields" />
<input type="reset" value="Start Over" />

Reset Buttons:

HTML - User Input

Input from the user is critical to the development of your websites and applications. Without the use of a scipting language such as PHP or Javascript, you will find HTML Input to be very limiting. Our PHP Form Example offers a step by step guide to mastering HTML/PHP forms. Feel free to copy any code you may find useful in that example.

The following lessons take a deeper look at each individual type of input field including those not mentioned: textareas, selection forms, and upload forms.