Sure, here’s an overview of common input types and attributes used in HTML forms:
1. **Text Input (`<input type=”text”>`):**
– Used for single-line text input.
– Attributes:
– `name`: Specifies the name of the input field.
– `id`: Specifies a unique identifier for the input field.
– `value`: Specifies the initial value of the input field.
– `placeholder`: Provides a hint to the user about the expected input.
– `maxlength`: Specifies the maximum number of characters allowed.
– Example:
“`html
<input type=”text” name=”username” id=”username” placeholder=”Enter your username” maxlength=”20″>
“`
2. **Password Input (`<input type=”password”>`):**
– Used for password input fields.
– Attributes:
– `name`, `id`, `value`, `placeholder`, `maxlength` (similar to text input).
– Example:
“`html
<input type=”password” name=”password” id=”password” placeholder=”Enter your password” maxlength=”20″>
“`
3. **Email Input (`<input type=”email”>`):**
– Used for email input fields.
– Validates input as an email address.
– Attributes:
– `name`, `id`, `value`, `placeholder`, `maxlength`.
– Example:
“`html
<input type=”email” name=”email” id=”email” placeholder=”Enter your email address”>
“`
4. **Number Input (`<input type=”number”>`):**
– Used for numeric input fields.
– Attributes:
– `name`, `id`, `value`, `placeholder`, `min`, `max`, `step`.
– Example:
“`html
<input type=”number” name=”quantity” id=”quantity” placeholder=”Enter quantity” min=”1″ max=”100″ step=”1″>
“`
5. **Checkbox (`<input type=”checkbox”>`):**
– Used for checkboxes.
– Attributes:
– `name`, `id`, `value`, `checked`.
– Example:
“`html
<input type=”checkbox” name=”agree” id=”agree” value=”1″ checked>
“`
6. **Radio Button (`<input type=”radio”>`):**
– Used for radio buttons (select one option from multiple choices).
– Attributes:
– `name`, `id`, `value`, `checked`.
– Example:
“`html
<input type=”radio” name=”gender” id=”male” value=”male” checked>
<input type=”radio” name=”gender” id=”female” value=”female”>
“`
7. **Textarea (`<textarea></textarea>`):**
– Used for multi-line text input.
– Attributes:
– `name`, `id`, `placeholder`, `maxlength`, `rows`, `cols`.
– Example:
“`html
<textarea name=”message” id=”message” placeholder=”Enter your message” rows=”4″ cols=”50″></textarea>
“`
8. **Submit Button (`<input type=”submit”>` or `<button type=”submit”></button>`):**
– Used to submit the form data to the server.
– Example:
“`html
<input type=”submit” value=”Submit”>
<button type=”submit”>Submit</button>
“`
These are some of the commonly used input types and attributes in HTML forms. Understanding how to use them allows you to create versatile and user-friendly forms for your web applications.