One of the most important elements in an HTML document is the input element since it is the main source of power that we have from the user, in this tutorial we will see a little more in depth how to work with this element and the characteristics it has, as well as also the attributes that we can use from HTML5 . Input Text The input text , is the most basic form of the input element, it allows us to capture alphanumeric flat text and any special character, although this input is not bad, sometimes we need to filter a bit more to obtain the data we really need. Let's see the special attributes that we can use with this element when we are working as text type. - dirname: This attribute is not new in HTML5, however this attribute allows us to change the direction of text entry either from right to left or from left to right, which is what we normally use in the western language.
<form action = "addcomment.cgi" method = post> <p> <label> Comment: <input type = text name = "comment" dirname = "comment.dir" required> </ label> </ p> <p> <button name = "mode" type = submit value = "add"> Post Comment </ button> </ p> </ form>
- list: This attribute is new in HTML5 and it gives us the possibility to specify the id of a datalist element that could assign values ​​to this element.
<label> Homepage: <input name = hp type = url list = hpurls> </ label> <datalist id = hpurls> <option value = "http://www.google.com/" label = "Google"> <option value = "http://www.reddit.com/" label = "Reddit"> </ datalist>
- maxlength: Another old HTML acquaintance is not new, but it is very helpful since it allows us to limit the maximum number of characters that the input accepts, an example is when we accept 3-letter codes, we place this attribute with value 3 and Trying to enter a fourth letter would not be written simply.
<input name = status maxlength = 140>
- pattern: New in HTML5 allows us to enter patterns of regular expression with which we can add a new level of validation without using additional languages.
<label> Part number: <input pattern = "[0-9] [AZ] {3}" name = "part" title = "A part number is a digit followed by three uppercase letters." /> </ label> - placeholder: New in HTML5 , it is a visual aid allowing us to enter a text that will appear in the input text saying a little help for the user, for example if an input text is for the input of first and last name, we could place it from placeholder "enter name and last name separated by space ", of course adjusting the styles so that everything looks aesthetically correct.
<p> <label> Name: <input type = "text" name = "fullname" placeholder = "John Ratzenberger"> </ label> </ p>
- readonly: This attribute is not new in HTML5, it allows us to make the user can not enter data or edit the content of the field that has this attribute.
<input required name = "3.pid" value = "" pattern = "[A-Z0-9] +">
- required: New in HTML5, this attribute allows us to indicate, if the input is empty, do not make a submit of the form yet, thus forcing the obligatory nature of its filling, in this way we raise another level of validation.
<p> <label for = "username"> E-mail address: </ label> <input id = "username" type = email required name = a> </ p>
- size: It helps us to specify the width of the input element, this attribute is not new, however it is very important since it helps us to give a better visual of the text that the user must enter, besides helping us at an aesthetic level to create input fields homogeneous, to be able to place them all of a width greater than the one that is brought by default.
<input required name = "3.pid" value = "" size = "10" pattern = "[A-Z0-9] +">
- value: It is not new in HTML5, this attribute allows us to place values ​​in an input text, it is different from the placeholder since what is in value assigned to submit if it would be sent as content of the element, is quite used to fill a form with Content that is brought from the database when we use a server language.
<input required name = "3.pid" value = "20" size = "10">
In the next part of the tutorial we will see some practical examples of how to use some of these attributes. Update: Part2 of this Tutorial