HTML Input Form Attribute

HTML input forms use various attributes to define the behavior and appearance of form elements. Here’s a rundown of key attributes with examples:

1. type

Specifies the type of input control.

• text: Single-line text input.
• password: Concealed text for sensitive input.
• email: Input for email addresses.
• number: Input for numeric values.

Example:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <label for="age">Age:</label>
  <input type="number" id="age" name="age">
  
  <input type="submit" value="Submit">
</form>

2. name

Defines the name of the input control, used to reference the input value when the form is submitted.

Example:

<form>
  <input type="text" name="username">
  <input type="submit" value="Submit">
</form>

3. value

Specifies the default value for the input field.

Example:

<form>
  <input type="text" name="username" value="DefaultUser">
  <input type="submit" value="Submit">
</form>

4. placeholder

Provides a hint or example of what should be entered in the input field.

Example:

<form>
  <input type="text" name="username" placeholder="Enter your username">
  <input type="submit" value="Submit">
</form>

5. required

Indicates that the input field must be filled out before submitting the form.

Example:

<form>
  <input type="text" name="username" required>
  <input type="submit" value="Submit">
</form>

6. maxlength

Limits the number of characters that can be entered in the input field.

Example:

<form>
  <input type="text" name="username" maxlength="10">
  <input type="submit" value="Submit">
</form>

7. min and max

Specify the minimum and maximum values for numeric input.

Example:

<form>
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="0" max="120">
  <input type="submit" value="Submit">
</form>

8. pattern

Defines a regular expression that the input value must match.

Example:

<form>
  <label for="phone">Phone Number:</label>
  <input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" placeholder="123-456-7890">
  <input type="submit" value="Submit">
</form>

9. autocomplete

Controls whether the browser should autocomplete the input field.

Example:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off">
  <input type="submit" value="Submit">
</form>

10. readonly

Makes the input field read-only; the user can’t change its value.

Example:

<form>
  <label for="info">Information:</label>
  <input type="text" id="info" name="info" value="This is read-only" readonly>
  <input type="submit" value="Submit">
</form>

These attributes help customize and validate user input, ensuring that forms are both functional and user-friendly.