HTML Input Element

The <Input> tag is a form control and is used to render controls. The main attributes for this are:

  • ID
  • Class
  • Name
  • Type
  • Value

The input element does not have separate closing tag.

The name attribute provides the control with a name, which is usually for server-side and JavaScript reference. The type attribute specifies the type of control, and it can accept these values:

text | password | checkbox | radio | submit | reset | file | hidden | image | button

For now, we will only focus on text, password and hidden. Lastly, the value attribute specifies a default value for the control; it is optional, however it is required for checkbox and radio.

Text & Password Field

The type=”text” and type=”password” render a single line control where users can enter text. Users can enter an unlimited number of characters. The password field masks the inputted data, usually with asterisks or simple bullets.

The data is not encrypted in any way or form;  the data is hidden so the person behind or next to you cannot see it. The password will be sent as plain text.

Example

<input type="text"  />

<input type="password" />

Output

Example 2 – Attributes (value, maxlength and readonly)

The readonly attribute specifies that the data cannot be modified by the user, but can be submitted to the server as it is valid. Obviously, this should not be used for the password field. The maxlength attribute specifies the maximum numbers of characters the field can accept.

<input type="text" maxlength="20" value="Please enter your name"/>

<input type="text" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tincidunt." readonly="readonly"/>

<input type="password" maxlength="20" />

Output

Hidden Fields

Hidden fields are similar to textboxes, however there is one difference: the field is hidden. These fields are generally used to send information about a user without them being able to see the field. For example, on this website there are hidden fields in the “Try It” sections, and the field contains a returnurl so you are redirected back here. Since the field is hidden,it is necessary to specify the value yourself as users cannot. Remember that users can still see the data by viewing the source, so never store personal information here.

Example

<input type="hidden" value="This is a hidden field" readonly="readonly"/>

Try It!