Learn HTML

"Are you looking to learn HTML from scratch? Look no further! Our HTML course is designed for both beginners and advanced learners who want to master the fundamental concepts of HTML. Our comprehensive course covers everything from the basic concepts of HTML, including tags, attributes, and elements, to the more advanced concepts such as multimedia, responsive design, and accessibility."

HTML Input Attributes

HTML Input Attributes are used to define additional characteristics of an input element in an HTML form. These attributes can be used to customize the behavior and appearance of the input element. Here is a list of commonly used HTML Input Attributes:

  • type: Defines the type of input element, such as text, number, email, etc.
  • name: Specifies the name of the input element. This attribute is used to identify the input element when the form is submitted.
  • value: Defines the default value of the input element.
  • placeholder: Specifies a short hint that describes the expected value of the input element.
  • required: Specifies that the input element must be filled out before submitting the form.
  • disabled: Disables the input element so that it cannot be used by the user.
  • readonly: Specifies that the input element cannot be edited by the user.
  • maxlength: Specifies the maximum number of characters that can be entered in the input element.
  • minlength: Specifies the minimum number of characters that must be entered in the input element.
  • size: Specifies the width of the input element in characters.
  • pattern: Specifies a regular expression pattern that the input element's value must match.
  • autocomplete: Specifies whether the browser should autocomplete the input element's value.
  • autofocus: Specifies that the input element should have focus when the page loads.
  • form: Specifies the id of the form element to which the input element belongs.
  • multiple: Allows the user to select multiple values in a single input element, such as checkboxes or file inputs.
  • checked: Specifies that a checkbox or radio button should be checked by default.
  • step: Specifies the increment value for number inputs.
  • min: Specifies the minimum value for number and date inputs.
  • max: Specifies the maximum value for number and date inputs.
  • list: Specifies the id of a datalist element that provides autocomplete suggestions for the input element.

 

Examples of input field attributes.

name: The name attribute is used to identify the input element when the form is submitted to the server. The name attribute should be unique within the form.

Example:

<input type="text" name="username">

 

type: The type attribute specifies the type of input element. There are various input types, including text, password, checkbox, radio, etc.

Example:


<input type="text" name="username">
<input type="password" name="password">
<input type="checkbox" name="rememberMe">
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">

 

value: The value attribute specifies the initial value of the input element. For checkboxes and radio buttons, the value attribute specifies the value that is submitted to the server when the form is submitted.

Example:


<input type="text" name="username" value="John">
<input type="checkbox" name="rememberMe" value="1">
<input type="radio" name="gender" value="male" checked>Male
<input type="radio" name="gender" value="female">Female

 

placeholder: The placeholder attribute specifies a short hint that describes the expected value of the input element.

Example:


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

 

required: The required attribute specifies that the input element must be filled out before submitting the form.

Example:


<input type="text" name="username" required>

 

disabled: The disabled attribute specifies that the input element is disabled and cannot be edited by the user.

Example:


<input type="text" name="username" disabled>

 

readonly: The readonly attribute specifies that the input element is read-only and cannot be edited by the user.

Example:


<input type="text" name="username" value="John" readonly>

 

min, max, and step: These attributes are used for input elements with type "number" and specify the minimum value, maximum value, and the stepping interval, respectively.

Example:


<input type="number" name="age" min="18" max="60" step="1">

 

multiple: The multiple attribute specifies that the user can select multiple values in a single input element.

Example:


<select name="fruits" multiple>
 <option value="apple">Apple</option>
 <option value="banana">Banana</option>
 <option value="orange">Orange</option>
</select>

 

autocomplete: The autocomplete attribute specifies whether or not the browser should autocomplete the input value.

Example:


<input type="text" name="username" autocomplete="off">


These are just some of the attributes that can be used with HTML input elements. By using these attributes, you can create powerful and flexible HTML forms that can be customized to meet your needs.