value attribute
the value attribute is used to set a default value for an input field. it can be used with various input types such as text, email, password, etc. when the form is loaded, the input field will display the value specified in the value attribute.
<input type="text" value="default value">
result:
readonly attribute
the readonly attribute is used to make an input field read-only. when an input field is set to readonly, the user cannot modify its value. however, the user can still select and copy the text from the input field.
<input type="text" value="readonly value" readonly>
result:
disabled attribute
the disabled attribute is used to disable an input field. when an input field is disabled, the user cannot interact with it at all. the input field will be grayed out and will not be submitted with the form.
<input type="text" value="disabled value" disabled>
result:
size attribute
the size attribute is used to specify the visible width of an input field. it is typically used with text input fields to control how many characters are visible at a time. the value of the size attribute is a positive integer that represents the number of characters that can be displayed.
<input type="text" size="20">
result:
maxlength attribute
the maxlength attribute is used to specify the maximum number of characters that a user can enter into an input field. it is commonly used with text input fields to limit the length of user input. when the user tries to enter more characters than the specified maxlength, the additional characters will be ignored.
<input type="text" maxlength="10">
result:
min and max attribute
the min and max attributes are used to specify the minimum and maximum values for certain input types, such as number, range, date, etc. the min attribute sets the lowest acceptable value, while the max attribute sets the highest acceptable value. if a user tries to enter a value outside of the specified range, the form will not submit and may display an error message.
<input type="number" min="1" max="10">
result:
multiple attribute
the multiple attribute is used with certain input types, such as email and file, to allow users to enter multiple values. when the multiple attribute is present, users can input more than one value by separating them with a comma (for email) or by selecting multiple files (for file input).
<input type="email" multiple>
result:
pattern attribute
the pattern attribute is used to specify a regular expression that the input value must match in order for the form to be submitted. it is commonly used with text input fields to enforce specific formatting rules, such as requiring a certain number of digits or a specific format for email addresses.
<input type="text" pattern="[A-Za-z]{3}">
result:
placeholder attribute
the placeholder attribute is used to provide a short hint or example of the expected input in an input field. the placeholder text is displayed inside the input field when it is empty and disappears when the user starts typing. it can be used to guide users on what type of information they should enter.
<input type="text" placeholder="Enter your name">
result:
required attribute
the required attribute is used to indicate that an input field must be filled out before the form can be submitted. when an input field has the required attribute, the browser will prevent form submission if the field is left empty and may display a warning message to the user.
<input type="text" required>
result:
autocomplete attribute
the autocomplete attribute is used to specify whether an input field should have autocomplete enabled or disabled. when autocomplete is enabled, the browser can suggest previously entered values for the input field based on the user's past input. this can help users fill out forms more quickly by providing suggestions as they type.
<input type="text" autocomplete="on">
result:
autofocus attribute
the autofocus attribute is used to automatically focus an input field when the page loads. when an input field has the autofocus attribute, it will be highlighted and ready for user input as soon as the page is displayed.
<input type="text" autofocus>
result:
step attribute
the step attribute is used to specify the legal number intervals for an input field. it is commonly used with number and range input types to control the increments or decrements of the value. for example, if you set step="0.01", the user can only enter values that are multiples of 0.01.
<input type="number" step="0.01">
result:
height and width attribute
the height and width attributes are used to specify the dimensions of certain input types, such as image. these attributes define the height and width of the input element in pixels.
<input type="image" src="image.jpg" height="100" width="100">
result:
list attribute
the list attribute is used to associate an input field with a datalist element. the datalist element provides a list of predefined options that users can choose from when filling out the input field. this can enhance the user experience by offering suggestions as they type.
<input type="text" list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
result:
form attribute
the form attribute is used to specify the form element that an input field belongs to. this allows you to associate input fields with a form even if they are not nested within the form element in the HTML structure. the value of the form attribute should match the id of the form element.
<form id="myForm">
<input type="text" name="username" form="myForm">
<input type="submit" value="Submit">
</form>
result:
formnovalidate attribute
the formnovalidate attribute is used to indicate that the form should not be validated when submitted. when this attribute is present on a submit button, the browser will skip the validation process and allow the form to be submitted even if there are invalid input fields.
<form>
<input type="text" required>
<button type="submit" formnovalidate>Submit without validation</button>
</form>
result:
formaction attribute
the formaction attribute is used to specify the URL that the form data will be submitted to when a submit button is clicked. this attribute can be used to override the default action specified in the form element for individual submit buttons.
<form action="/default-action">
<input type="text" name="username">
<button type="submit" formaction="/custom-action">Submit to custom action</button>
</form>
result:
formenctype attribute
the formenctype attribute is used to specify the encoding type for the form data when it is submitted. this attribute is typically used with file input fields to specify how the form data should be encoded when files are uploaded.
<form>
<input type="file" name="file">
<button type="submit" formenctype="multipart/form-data">Submit with file upload</button>
</form>
result:
formmethod attribute
the formmethod attribute is used to specify the HTTP method that will be used to submit the form data. it can be set to either "get" or "post". when this attribute is present on a submit button, it overrides the default method specified in the form element for that button.
<form method="post">
<input type="text" name="username">
<button type="submit" formmethod="get">Submit with GET method</button>
</form>
result:
formtarget attribute
the formtarget attribute is used to specify where to display the response after submitting the form. it can be set to values such as "_blank" (to open in a new tab), "_self" (to open in the same frame), "_parent" (to open in the parent frame), or "_top" (to open in the full body of the window).
<form>
<input type="text" name="username">
<button type="submit" formtarget="_blank">Submit and open in new tab</button>
</form>
result: