HTML5, Input Element - Part 2

Question

1 Answer

Best answer

Already in the first part of this Tutorial we define the attributes with which we can work, we saw that we have some new ones for HTML5 and others that are not, however when it comes to building solid fields that help us in the essential processes of the site, It is when the combination of these and the good use of each one will help us to collect the data in the best possible way.

Setting the size of a field

As we saw, we have two attributes that affect us directly in the size of a field, these are size and maxlength , one regulates the visual amplitude of the field and the other the amount of text that the field can effectively receive.

Let's see an example using both attributes:

 <! DOCTYPE HTML> <html> <head> <title> Example </ title> </ head> <body> <form method = "post" action = "http: // titan: 8080 / form"> <p> <label for = "name"> Name: <input maxlength = "10" id = "name" name = "name" /> </ label> </ p> <p> <label for = "city"> City: <input size = "10" id = "city" name = "city" /> </ label> </ p> <p> <label for = "fave"> Fruit: <input size = "10" maxlength = "10" id = "fave" name = "fave" /> </ label> </ p> <button type = "submit"> Submit Vote </ button> </ form> </ body> </ html>

In this example we see how the first field is specified a maxlength , only with this we tell the browser that it can only accept 10 characters however you can assign the width by default, in the second field we specify the size with what we say how wide it should be, however we do not limit the text input and in the third we apply both conditions, let's see how we are in the browser.

Use of value and placeholder

Having seen the difference between these two fields, in this example we are going to demonstrate effectively how to apply them to a form, let's see in the following code how to use them.

 <! DOCTYPE HTML> <html> <head> <title> Example </ title> </ head> <body> <form method = "post" action = "http: // titan: 8080 / form"> <p> <label for = "name"> Name: <input placeholder = "Your name" id = "name" name = "name" /> </ label> </ p> <p> <label for = "city"> City: <input placeholder = "Where you live" id = "city" name = "city" /> </ label> </ p> <p> <label for = "fave"> Fruit: <input value = "Apple" id = "fave" name = "fave" /> </ label> </ p> <button type = "submit"> Submit Vote </ button> </ form> </ body> </ html>

As we see in the first two fields, the placeholder indicates a help of what the user must enter, this value that contains the placeholder is not the value of the input field, so if we submit these fields will arrive empty, instead the third field it has something already placed in the value attribute, this would happen if you submit to that form.

Let's see how the browser would show us this

Create read-only fields

Sometimes we must work with read-only fields, either because the value should not be modified by the user or is merely informative. It can also be the case that it is the result of a previous filtering by the user and only this value can be seen, for this we have two options that even if they look the same are totally different.

We had already seen the attribute readonly and we know that it is so that the field can not be modified, we also have the disabled attribute, it does the same function as readonly , however when submitting all the disabled fields are not sent so it is as if did not exist in the form.

Let's see the above explained with a practical example.

 <! DOCTYPE HTML> <html> <head> <title> Example </ title> </ head> <body> <form method = "post" action = "http: // titan: 8080 / form"> <p> <label for = "name"> Name: <input value = "Adam" disabled id = "name" name = "name" /> </ label> </ p> <p> <label for = "city"> City: <input value = "Boston" readonly id = "city" name = "city" /> </ label> </ p> <p> <label for = "fave"> Fruit: <input id = "fave" name = "fave" /> </ label> </ p> <button type = "submit"> Submit Vote </ button> </ form> </ body> </ html>

We can see that the first field is disabled and the second field is readonly, when the disabled appears in the browser, it appears with a gray color, normally associated with not enabling, while the readonly looks like a normal field, although if we try to write in any, none will let us enter text.

Let's see how we have the example:

With this we finish this second part of the tutorial, we are already able to improve our forms using basic validations of size and amount of text and also controlling that the user can modify or not, as well as being able to show him help in the fields so that he has an idea what should or should not enter.

answered Jun 23, 2019 by stackoverflow (3.5m points)
edited Jun 23, 2019

HTML5, Input Element - Part 2

Your answer

1 Answer

Your comment on this answer:

Related questions