The most popular HTML tag used on a webpage is an HTML form. It is used to get some data from visitors and display some results on the web page depends on how visitors fill data fields in this HTML form. Are you a master in HTML form building, or maybe from time to time, you need to search for information about dealing with this HTML tag? In this post, I stored some information about HTML form.
What can I do with the HTML form tag?
Basically, the HTML form tag is using to get data from visitors and send this data to the server. Depend on what visitors put into HTML form, on the server site some decisions are taken, and finally, visitors can see new information on a web page. For example, he or she can register for membership, or buy something, or get an answer to some question.
Another way is building web page behavior using JavaScript. This is not so popular, because of security reasons, but also available. I wrote How to use data from HTML form in JavaScript last week, or I use data from HTML form in JavaScript to build FrontEndQuiz, but still, this was only for learning purpose and especially in web application more common is using a server-side language like PHP to dealing with data from HTML form.
How you can send data from HTML form?
There is two option to send data from HTML form: GET and POST.
The GET method is mostly used to get some specific data from a server or to send data that can be seen by everyone. In this method, all information is stored in a URL. Now day the GET method it’s often used in a marketing campaign.
If you want to know, from where the traffic came to your page you build URLs with specific data on the end of this URL which allows you, to store this information on the server or some application like Google Analytics. Example URL with data sending by the GET method could look like this one:
www.myserver.com/sellpage.html?campainId=1?campainSource=SocialMediaIn this kind of sending data, there is one major problem: users can change the data that they send at any time and any way. This of course generated a security problem for the data and the server. That is the reason, the POST method is using to send data to the server in a safe way. What’s more, using the POST method you can decide how to encoded sending data.
Now, let’s build a simple form tag with the send method decelerated:
<form action=”myserver.com method=”get”>
<form action=”myserver.com method=”post”>
One more important thing about using the POST method. You need to declare the input name, to call data from this field later in PHP or JavaScript. For example, let’s say that we want to know the first name of a web page visitor, the input tag should look like this:
<input type=”text” name=”firstName”>How to spread click response to the data field description?
It’s good practice to enable data input to the specific field after the user clicks on the input field and also when the user clicks on the field name. How you can do that?
The tag, which activates the data field after a user clicked on text with the name od field, is called . You need to wrap all data field and field name in this label, for example:
<label>First Name:<input type=”text” name=”firstName”></label>How to enable a web browser to autocomplete data field?
One of my favorite abilities of a modern web browser is filing data fields automatically. This function saves a lot of my time, and I’m sure that many people agree with me. But you can decide If this option will be able for users or not in an HTML form on your website.
There is an attribute in HTML form that allows web developers to decide if autocomplete functionality is enabled. This attribute called “autocomplete” and can take values on/off. For example:
In this case, when a visitor wants to log in to his account, the User Name field can be autocompleted by a web browser, but the password field must be typed manually. I used here also one interesting function available in HTML form: input type=’password’. This input type hides inputted password characters behind spots. You can’t see these characters, and nobody else can see them.
How to send files using HTML form?
It’s very often when we use an HTML form to send some file on the server. But it’s also often that we don’t know how to build this kind of form, that handles this.
There are a few attributes, that you need to set if you want to allow visitors to send files on the server. First of all, in the form tag, you should set encytype attribute to “multipart/form-data” and the action attribute to point where to send files. Secondly, in the input tag, you should set the type attribute to “file”. For example, this kind of form could loke like this:
Where to insert the Sending button.
The last thing is the sending button. Its construction isn’t complicated. You set type as “submit” and “value” as a text witch web browser will display on the web page. But there is one simple question, which is able to destroy this simple story of the sending button: what web browser should do after the user click the send button? I wrote more about this here: How to use data from HTML form in JavaScript. In this post, I just admit that there is a big difference if you want to send data to the server, or stay on the current web page.
That’s all that I wanted to write about the HTML form tag. More, you can read on Mozilla Developer Page.