HTML Form Attributes & Elements with Examples PART-2
HTML TUTORIAL NO: 24 (PART=2)
HTML Form Attributes & Elements with Examples
In this tutorial we will learn some left Attributes in previous Tutorial of HTML Form Attribute Part=1, Here we learn and see example of some left form Elements and Attributes, previous tutorial of HTML form we not see all attribute, so in this tutorial we will learn all the HTML Form Attributes. Lean HTML Form Attribute PART-1
In this tutorial we will enumerate, explain and given all examples of the attributes that can be use most in HTML Form, like multiple, textarea, input and select.
The Attribute which we will learn now are given below-
HTML Form Attributes
- multiple
- name
- placeholder
- required
- spellcheck
- wrap
- readonly
-
pattern
Now we will learn and see examples of all the Attributes of HTML Form one by one and we also see programming with output of all Attributes.
Attribute multiple
It Attribute indicates whether multiple items can be selected in a form control, in Input type “file” will can select and uploaded multiple files using this attribute in HTML Form.
Programming Example
<!DOCTYPE html> <html lang="en"> <head> <title>Attribute Form</title> </head> <body> <form action="action.html"> Select File:<input type="file" multiple> <br> <input type="submit"> </form> </body> </html> |
Output of above Programming
 |
You can see in above programming example “choose Files”, If we not use attribute multiple then here only “Select File” and we cannot select multiple files.
Attribute pattern
It attribute specific a regular Expression that an input’s is checked against.
Programming Example
<!DOCTYPE html> <html lang="en"> <head> <title>Attribute Form</title> </head> <body> <form action="action.html"> Pttern: <input type="text" pattern="[a-zA-Z0-9]+"> <br> <input type="submit"> </form> </body> </html> |
Output of above Programming
 |
Attribute name
It attribute specific the name of a input data represent when user input text in text field and data submitted in server.
Programming Example
<!DOCTYPE html> <html lang="en"> <head> <title>Attribute Form</title> </head> <body> <form action="action.html"> Name: <input type="text" name="Username"><br> <input type="submit"> </form> </body> </html> |
Output of above programming
 |
Attribute placeholder
In this attribute hint the user should what to entered in the text field, now we can see in the programming examples.
<!DOCTYPE html> <html lang="en"> <head> <title>Attribute Form</title> </head> <body> <form action="action.html"> Name: <input type="text" placeholder="Enter Your Name"><br> <input type="submit"> </form> </body> </html> |
Output of above Programming
 |
Attribute readonly
This attribute specify user only read when it open text field they cannot modify and write in text field.
Programming Example
<!DOCTYPE html> <html lang="en"> <head> <title>Attribute Form</title> </head> <body> <form action="action.html"> <textarea cols="10" rows="2" readonly>You cannot write and modify in this textarea.</textarea> <br> <input type="submit"> </form> </body> </html> |
Output of above Programming
 |
Attribute warped
This attribute indicates how a text field of Form should be warped.
Programming Example
<!DOCTYPE html> <html lang="en"> <head> <title>Attribute Form</title> </head> <body> <form action="action.html"> <label> Hard vlaue: <textarea cols="15" wrap="hard"></textarea> </label><br> <label>Soft Value <textarea cols="15" wrap="hard"></textarea> </label> <br> <input type="submit"> </form> </body> </html> |
Output of above Programming
 |
Attribute spellcheck
This attribute indicates whether a text field should have its sapling and grammar checked
When user write wrong spelling it indicate red underline in below the text.
Programming Example
<!DOCTYPE html> <html lang="en"> <head> <title>Attribute Form</title> </head> <body> <form action="action.html"> <label> Spellcheck On: <textarea spellcheck="true"></textarea> </label> <br> <label>Spellcheck Off: <textarea spellcheck="false"></textarea> </label> <br> <input type="submit"> </form> </body> </html> |
Output of above Programming Example
 |
In above programming output you can see in “Spellcheck On text field the text is underlined because first character is small” but in Spellcheck Off there is no error because here spellcheck is off.
Attribute required
This attribute specific the form should be filled before submitting the Form. If you use this attribute in your HTML Form user cannot submit the Form without filled of all the text field.
Programming Example
<!DOCTYPE html> <html lang="en"> <head> <title>Attribute Form</title> </head> <body> <form action="action.html"> Name : <input type="text" name="Name" required> <br> E-mail: <input type="email" name="email" required><br> <input type="submit"> </form> </body> </html> |
Output of above Programming
 |
In this tutorial we learned and see the example of HTML Form all important Attributes, I hope you enjoy and learned this tutorial, in next tutorial we will learn a new topic of HTML. Learn HTML Form Attribute and Elements PART-1-
Read This-
- Learn HTML Form Attributes & Elements (PART=1)
- Learn how to create stylish Sign-Up Page with HTML & CSS.
- Learn HTML Table with Programming Example.
- HTML Form with Examples.
- HTML Form Input Type with Examples.
- Learn HTML Audio and Video Tag with Examples.
1 Comment
zoritoler imol · July 1, 2022 at 6:24 am
What¦s Taking place i am new to this, I stumbled upon this I have found It absolutely helpful and it has helped me out loads. I am hoping to contribute & help different users like its helped me. Great job.