HTML Input Tags (HTML Forms tutorials part 1)

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.

HTML Code:

<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.

HTML Code:

<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.

HTML Code:

<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.

HTML Code:

<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.

HTML Code:

<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.