This content originally appeared on DEV Community and was authored by wasifali
HTML input attributes
HTML <input> elements have various attributes that control their behavior and appearance. Here are some of the most commonly used attributes:
type: Specifies the type of input control. Common types include:
text: A single-line text input (default).
password: A text input where the entered text is masked.
checkbox
A checkbox allowing multiple selections.
<input type="checkbox" id="agree" checked>
<label for="agree">I agree to the terms</label>
radio: A radio button allowing single selection from multiple options.
file: A control to select a file for upload.
submit: A button to submit a form.
reset: A button to reset form inputs to their default values.
button: A generic button (useful with JavaScript).
email, tel, url, etc.: Input types for specific data formats (helps with mobile keyboards and validation).
name: The name of the input field, which is submitted along with the form data. It must be unique within the form.
value: The initial value of the input field. For checkboxes and radio buttons, this attribute determines the value that gets submitted when the input is checked/selected.
placeholder: A short hint or example text displayed in the input field before the user enters a value. It's typically used for providing a hint about the expected input format.
required: Specifies that the input field must be filled out before submitting the form. It triggers browser validation and displays an error message if the field is empty.
disabled: Disables the input field so that its value is not submitted with the form and the user cannot interact with it.
readonly: Makes the input field read-only, meaning the user can see its value but cannot modify it.
maxlength and minlength: Specifies the maximum and minimum length of text allowed in a text input.
size: Specifies the width of the input field in characters (applies only to text, password, and search types).
pattern: Specifies a regular expression pattern that the input value must match to be considered valid.
autocomplete: Enables or disables autocomplete suggestions for the input field. Values can be on or off.
autofocus: Specifies that the input field should automatically get focus when the page loads.
multiple: Specifies that multiple values can be entered into a file input ().
These attributes can be combined to customize the behavior and appearance of elements according to the specific needs of your HTML form. Each type of input () element may support different subsets of these attributes depending on its intended use.
This content originally appeared on DEV Community and was authored by wasifali
wasifali | Sciencx (2024-06-23T09:50:13+00:00) HTML input attributes with examples. Retrieved from https://www.scien.cx/2024/06/23/html-input-attributes-with-examples/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.