HTML input elements

Input elements makes your website a more user friendly interface. Input elements take inputs from the user. There are different input types and we will discuss them here. All inputs are inside the <input> tag. Input should have a name attribute to be able to send its data in a form (you will learn more about forms later in this tutorial). Input elements can have a default value that will be placed inside the value attribute.

Text Input

<input type="text" name="inputtxt" value="insert your text here." />
Output

Button Input

A button type input will display a button in your webpage.

<input type="button" name="inputbtn" value="Click Me" />
Output

Radio Buttons

A radio button is an element mostly used for toggling or selecting only one item. This means that a radio button that has been selected will make other radio buttons to be deselected if they have the same name attribute.

<input type="radio" name="item" value="Item 1">Item 1
<input type="radio" name="item" value="Item 2">Item 2
Output
Item 1
Item 2

CheckBox

A checkbox is an element that can be used to select multiple items unlike the radio buttons. The construction is the same like in radio button except that the type is checkbox.

<input type="checkbox" name="item" value="Item 1">Item 1
<input type="checkbox" name="item" value="Item 2">Item 2
Output
Item 1
Item 2
Share this tutorial!