HTML Form Attributes & Elements with Examples
HTML TUTORIAL NO: 22, (PART=1)
HTML Form Attributes & Elements with Examples
Here we learn and see example of all form Elements and Attributes, previous tutorial of HTML form we not see all attribute, so we make a different and separate tutorial for HTML Form Attributes.
In this tutorial we will enumerate, explain and given all examples of the attributes that can be use most in HTML Form.
HTML Form Important Attributes
- autocomplete
- disable
- maxlength
- minlenght
- min
- max
- autofocus
- autocapitalize
Attributes autocomplete
It attributes (autocomplete) indicate whether a text value should be automatically completed by the different browser. When you sometime save your information any types of Form by the browser, it automatically completed that means show option below text field of Form.
Example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Attribute Example</title>
</head>
<body>
<form action="action.html">
<label for="autocomplete">
Autocomplete On: <input
type="text" autocomplete="on">
</label> <br>
<label for="autocomplete">
Autocomplete Off: <input
type="text" autocomplete="off">
</label>
<input type="submit">
</form>
</body>
</html>
|
Output of above Example,
 |
Above example when you click autocomplete on text field see option some information about you like name.
Attribute autocapitalize
It attribute indicate whatever a text value should be automatically capitalize when user input data.
Example.
<!DOCTYPE html> <html lang="en"> <head> <title>Attribute Example</title> </head> <body> <form action="action.html"> <label> Autocapitalize Sentence:<input type="text" autocapitalize="sentences"> </label> <br> <label> Autocapitalize word:<input type="text" autocapitalize="word"> </label><br> <label> Charcters Value:<input type="text" autocapitalize="characters"> </label><br> <label> Autocapitalize Off: <input type="text" autocapitalize="off"> </label> <br> <input type="submit"> </form> </body> </html> |
Output of above Example,
 |
Attribute disabled
It attribute indicate disabled, you can not write text field, when already written you can only see this text, it attribute also used in selectable and clickable elements.
Example.
<!DOCTYPE html> <html lang="en"> <head> <title>Attribute Example</title> </head> <body> <form action="action.html"> <input type="text" value="I am disabled text" disabled> <br> <select> <option value="1">Input Type</option> <option value="2">Output Type</option> </select> <br> <textarea cols="5" rows="2" disabled>I am disabled text area.</textarea> <br> <input type="submit"> </form> </body> </html> |
Output of above Example of Programming.
 |
Above output example you can see all field are disabled Text Field, Submit Button, Text area and Selection Field is also disabled.
Attribute max
Here the Attribute max is indicating the of a form control, for example; we coding in text field maximum number is write by user is 10, and user write 11 then text field is see error, we can see now in example.
Example,
<!DOCTYPE html> <html lang="en"> <head> <title>Attribute Form</title> </head> <body> <form action="action.html"> Write DOB:<input type="date" max="2002-07-07"> <br> Write No<input type="number" max="10"> <input type="submit"> </form> </body> </html> |
Output of above Examples
 |
Above example when we write 15, it warned write less than or equal to 10 and if we write DOB text field above 2002-07-07 it also warned, so it is the action and use of max attribute.
Attribute maxlength
It attribute specific to write the maximum character in the text box, it is such as write and input the user Mobile Number (write without space 10 character),if user try to write above 10 character they will not be able write, now we can see in the below example.
Example.
<!DOCTYPE html> <html lang="en"> <head> <title>Attribute Form</title> </head> <body> <form action="action.html"> Enter Mo. N.:<input type="text" maxlength="10"> <input type="submit"> </form> </body> </html> |
Output of above Example
 |
Attribute min
It attribute specific a minimum value for a form control. It also works like max. Now we can see below example.
Example.
<!DOCTYPE html> <html lang="en"> <head> <title>Attribute Form</title> </head> <body> <form action="action.html"> Enter DOB:<input type="date" min="2002-07-07"><br> Enter No.: <input type="number" max="10"> <input type="submit"> </form> </body> </html> |
Output of above Example,
 |
As you can see the above example showing month from July to December and January to June is hide, and Year is also shoe from 2002 to 2020.
Attribute minlength
It specific the number and character of minimum character that a user can enter, For example If you write below the 10 character it show error and show comment box write above 10 character, Now we see below example.
Example.
<!DOCTYPE html> <html lang="en"> <head> <title>Attribute Form</title> </head> <body> <form action="action.html"> Enter:<input type="text" minlength="10"><br> <input type="submit"> </form> </body> </html> |
Output of above Example,
 |
As you can see above example when we write below 10 character it shows a box here written (Please length this text to 10 character or more than 10) you can look at above.
In this tutorial we learned and saw example of some Attributes of HTML Form, I hope you learned and entertain this tutorial, in next part of this tutorial we will learn all the HTML Form Attribute, HTML Form Attributes & Elements PART-2
Read Also-
- Learn HTML Form with Example.
- HTML Table full tutorial with programming.
- Learn HTML Form Label with Example.
- Learn HTML Form Input Type with Example.
- Learn HTML YouTube Video with examples.
- HTML Button with Examples.
2 Comments
Shalonda Challa · January 16, 2023 at 9:25 am
Hello There. I discovered your weblog using msn. This is an extremely well written article. I will be sure to bookmark it and return to learn more of your useful information. Thank you for the post. I’ll certainly return.
gateio · June 9, 2023 at 1:18 am
I may need your help. I tried many ways but couldn’t solve it, but after reading your article, I think you have a way to help me. I’m looking forward for your reply. Thanks.