HTML HTML Tutorial HTML Forms HTML Graphics HTML Media HTML APIs HTML Tags



HTML Input Attributes

HTML Input Attributes are used to define the characteristics of an input element in an HTML form. These attributes help in collecting user input and submitting it to the server for processing. There are various types of input attributes available in HTML, each with its own set of properties and values.

Types of HTML Input Attributes

Some of the commonly used HTML Input Attributes are:

  • type: This attribute specifies the type of input element. Some of the common types are text, password, checkbox, radio, submit, reset, button, file, date, time, email, url, number, range, color, etc.
  • name: This attribute specifies the name of the input element. This name is used to identify the input element when the form is submitted to the server.
  • value: This attribute specifies the initial value of the input element. For example, the initial value of a text input element can be set using this attribute.
  • placeholder: This attribute specifies a short hint that describes the expected value of the input element. This hint is displayed in the input field until the user enters a value.
  • required: This attribute specifies that the input element must be filled out before submitting the form. If this attribute is present, the form will not be submitted until the input element is filled out.
  • readonly: This attribute specifies that the input element is read-only. The user cannot modify the value of the input element.
  • disabled: This attribute specifies that the input element is disabled. The user cannot interact with the input element.
  • size: This attribute specifies the width of the input element in characters.
  • maxlength: This attribute specifies the maximum number of characters that can be entered in the input element.

Code Examples

Here are some examples of how to use HTML Input Attributes:

Text Input

To create a text input element, use the following code:

  <input type="text" name="username" placeholder="Enter your username" required>

This code will create a text input element with the name "username", a placeholder text "Enter your username", and a required attribute that specifies that the input element must be filled out before submitting the form.

Password Input

To create a password input element, use the following code:

  <input type="password" name="password" placeholder="Enter your password" required>

This code will create a password input element with the name "password", a placeholder text "Enter your password", and a required attribute that specifies that the input element must be filled out before submitting the form.

Checkbox Input

To create a checkbox input element, use the following code:

  <input type="checkbox" name="agree" value="yes" required> I agree to the terms and conditions

This code will create a checkbox input element with the name "agree", a value of "yes", and a required attribute that specifies that the input element must be checked before submitting the form. The text "I agree to the terms and conditions" will be displayed next to the checkbox.

Radio Input

To create a radio input element, use the following code:

  <input type="radio" name="gender" value="male" required> Male
  <input type="radio" name="gender" value="female" required> Female

This code will create two radio input elements with the name "gender", values of "male" and "female", and a required attribute that specifies that one of the radio buttons must be selected before submitting the form.

Submit Button

To create a submit button, use the following code:

  <input type="submit" value="Submit">

This code will create a submit button with the text "Submit". When the user clicks on this button, the form will be submitted to the server.

Reset Button

To create a reset button, use the following code:

  <input type="reset" value="Reset">

This code will create a reset button with the text "Reset". When the user clicks on this button, all the input elements in the form will be reset to their initial values.

Button

To create a button, use the following code:

  <input type="button" value="Click me">

This code will create a button with the text "Click me". This button can be used to trigger a JavaScript function or perform some other action.

Conclusion

HTML Input Attributes are an essential part of HTML forms. They help in collecting user input and submitting it to the server for processing. By using the various input attributes available in HTML, you can create powerful and interactive forms that can be used for a variety of purposes.

References

Activity