This chapter includes an additional tutorial of HTML5 input Attributes, Which is containing the related attribute of Input Element.
<Input Attributes>
The Input Attributes gives some extra controll on Input Element. An individual can implement some addtional feature to manipulate more advantages of Input Element.
It has mainly two attributes, has been described below:
|
✔ autofocus ✔ form ✔ formaction ✔ formenctype ✔ formmethod ✔ formnovalidate ✔ formtarget |
✔ height and width ✔ list ✔ min and max ✔ multiple ✔ pattern (regxp) ✔ placeholder ✔ require ✔ step |
autofocus
An autofocus attribute is used for autofocusing of an input element, when the page is load.
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title name will go here</title>
</head>
<body>
<form action="demo_form.php">
First name:<input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
</body>
</html>
form
A little bit confusion you may have about the form attribute. Let it more clearly, the form attribute is entrirely diffrent from form element. The form attribute is an attribute, which is defined in the input tag, when we call an input element outside of form element.
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title name will go here</title>
</head>
<body>
<form action="demo_form.php" id="form1">
First Name: <input type="text" name="fname">
<input type="submit">
</form>
Last Name: <input type="text" name="lname" form="form1">
</body>
</html>
formaction
The formaction attribute is used to send the data through the URL, as we do it with action attribute of <form> element.
The formaction attribute overrides the action attribute of the form element.
The formaction attribute is used with the following type:
✔ type="submit"
✔ type="image"
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title name will go here</title>
</head>
<body>
<form action="demo_form.php">
First Name: <input type="text" name="fname">
Last Name: <input type="text" name="lname">
<input type="submit">
<input type="submit" formaction="demo_admin.php" value="submit as Admin">
</form>
</body>
</html>
formenctype
The formenctype attribute is used to define the encoding of form data when it is sent to server. This features work only with the POST method.
The formenctype attribute overrides the enctype attribute of form element.
The formenctype attribute is used with the following type:
✔ type="submit"
✔ type="image"
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title name will go here</title>
</head>
<body>
<form action="demo_form.php" method="post">
First Name: <input type="text" name="fname">
<input type="submit">
<input type="submit" formenctype="multipart/form-data" value="submit enctype">
</form>
</body>
</html>
formmethod
The formmethod attribute is used to define the HTTP method for sending the data to the server.
The formmethod attribute overrides the method attribute of <form> element.
The formmethod attribute is used with the following type:
✔ type="submit"
✔ type="image"
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title name will go here</title>
</head>
<body>
<form action="demo_form.php" method="get">
First Name: <input type="text" name="fname">
Last Name: <input type="text" name="lname">
<input type="submit">
<input type="submit" formmethod="post" formaction="demo_post.php">
</form>
</body>
</html>
formnovalidate
The formnovalidate attribute is used to prevent the validation of a specific input element.
The formnovalidate attribute overrides the novalidate attribute of the <form> element.
The formmethod attribute is used with the following type:
✔ type="submit"
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title name will go here</title>
</head>
<body>
<form action="demo_form.php">
First Name: <input type="text" name="fname" required>
<input type="submit">
<input type="submit" formnovalidate value="submit without validate">
</form>
</body>
</html>
formtarget
The formtarget is used to define the particular landing page where the server shows its reponse after submission of form.
The formtarget attribute overrides the target attribute of the <form> element.
The formtarget attribute is used with the following type:
✔ type="submit"
✔ type="image"
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title name will go here</title>
</head>
<body>
<form action="demo_form.php">
First Name: <input type="text" name="fname">
Last Name: <input type="text" name="fname">
<input type="submit" value="Submit Normal">
<input type="submit" formtarget="_blank" value="Submit in New Window">
</form>
</body>
</html>
height and width
The height and width attribute specify the height and width of an input element.
The height and width attribute is used only with type="image".
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title name will go here</title>
</head>
<body>
<form action="demo_form.php">
First Name: <input type="text" name="fname">
<input type="image" src="images/tickmark.png" height="50" width="50">
</form>
</body>
</html>
list
The list attribute is referred to datalist element, which is used for pre-defined options for input element.
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title name will go here</title>
</head>
<body>
<form action="demo_form.php">
<input list="country">
<datalist id="country">
<option value="India">
<option value="Australia">
<option value="Sourth Africa">
<option value="Canada">
<option value="America">
</datalist>
<input type="submit" value="submit"/>
</form>
</body>
</html>
min and max
The min and max attribute is used to fix the minimum and maximum value to an input field.
The following input type is support by the min and max attributes:
✔ type="number"
✔ type="range"
✔ type="date"
✔ type="datetime"
✔ type="datetime-local"
✔ type="month"
✔ type="time"
✔ type="week"
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title name will go here</title>
</head>
<body>
<form action="demo_form.php">
Enter a date before 1988-12-12:
<input type="date" name="bday" max="1988-12-12"><br>
Enter a date after 2012-12-12:
<input type="date" name="bday" min="2012-12-12"><br>
Quantity (between 1 and 10):
<input type="number" name="quantity" min="1" max="10"><br>
<input type="submit">
</form>
</body>
</html>
multiple
The multiple attribute is used to give the permission to user selecting or entering more than one value.
The multiple attribute works with the following input types:
✔ type="email"
✔ type="file"
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title name will go here</title>
</head>
<body>
<form action="demo_form.php">
Select Images:
<input type="file" name="img" multiple<br>
<input type="submit">
</form>
</body>
</html>
pattern
The pattern attribute is used for checking the exact match against pre-defined regular expression.
The following input type is support by the pattern attribute:
✔ type="text"
✔ type="search"
✔ type="url"
✔ type="tel"
✔ type="email"
✔ type="password"
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title name will go here</title>
</head>
<body>
<form action="demo_form.php">
Village Name:
<input type="text" name="vname" pattern="[A-Za-z]{5}" title="Valid Name"/>
<input type="submit">
</form>
</body>
</html>
placeholder
The placeholder attribute is used for a short hint for specific input field.
The following input type is support by the placeholder attributes:
✔ type="text"
✔ type="search"
✔ type="url"
✔ type="tel"
✔ type="email"
✔ type="password"
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title name will go here</title>
</head>
<body>
<form action="demo_form.php">
First Name: <input type="text" name="fname" placeholder="first name"/>
<input type="submit">
</form>
</body>
</html>
required
The required attribute is used for a required input field. Without filling the input field user can't submit the form.
The following input type is support by the rquired attributes:
✔ type="text"
✔ type="search"
✔ type="url"
✔ type="tel"
✔ type="email"
✔ type="password"
✔ type="date"
✔ type="pickers"
✔ type="number"
✔ type="checkbox"
✔ type="radio"
✔ type="file"
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title name will go here</title>
</head>
<body>
<form action="demo_form.php">
First Name: <input type="text" name="fname" required/>
<input type="submit">
</form>
</body>
</html>
step
The step attribute is used for mathematical term matching case. If you insert a value between (0-9), the input field only accept the value which is multiplication of that value
As we put the value 4, it will accept (-8, -4, 0, 4, 8, 12)
The following input type is support by the rquired attributes:
✔ type="number"
✔ type="range"
✔ type="date"
✔ type="datetime"
✔ type="datetime-local"
✔ type="month"
✔ type="time"
✔ type="week"
Supported Browser
Below is complete syntax along with example
<!DOCTYPE html>
<html>
<head>
<title>Title name will go here</title>
</head>
<body>
<form action="demo_form.php">
<input type="number" name="number" step="4"/>
<input type="submit">
</form>
</body>
</html>