HTML5 Input Types
There are quite a few elements in HTML5. Let's look at some of widely-used input elements.
See the Pen EjwYmO by VivaxSolutions (@VivaxSolutions) on CodePen.
The input elements play a very big role in Forms, which we use all the time to communicate with the people that we do business with. In the above form,the following input controls are used:
- Two plain text boxes - <input type="text" name="first and last name" value="Ben & Dover" >
- A password text box- <input type="password" name="password" >
- An email text box <input type="email" name="Email" value="Ben & Dover" >
- A radio button list - <input type="radio" name="gender" value="female" >
- A checkbox list - <input type="checkbox" name="Married" >
- A button to submit data included in the form to a remote web server - <input type="submit" name="send" value="Submit Query" >
The action attribute of the form is a particularly interesting thing to note; it is the file in the server, which we submit the data for, in order to make a decision - to store in a database or respond to an inquiry.
A form sends out data in two different ways, depending on the method attribute of the form:
- Post - send data in the form
- Get - send data as a query string
Both methods send data as name=.. and value=... pairs. In the first method, the data is sent to a specific source - action.php file on the server. In the second case, however, the data is attached to a query string that you can see on the address bar.
Get method - https:www.vivaxsolutions.com/demo.aspx?firstname=ben&lastname=dover&password=****&email=ben@gmail.com&gender=male&civil=married
Post method - POST /test/demo.aspx https/1.1
Host: www.vivaxsolutions.com
firstname=ben&lastname=dover&password=****&email=ben@gmail.com&gender=male&civil=married
You can see clearly the dangers associated with Get method while sending data via query strings - exposing them to the entire online community!
With HTML5, there have been a set of new input controls which are really useful in enhancing user experience. Let's look at some of the important ones.
Input Type - range
The range element, for example, can be used to show Boyle's Law in physics; the greater the pressure of a gas the smaller the volume or vice versa, provided that the temperature remains constant.
P ∝ 1 / V
The structure of range input element is as follows:
<input type="range" id="Range1" min="20" max="40" value="30" onchange="boyle()" >
In this case, JavaScript is used to make P and V change with the values of range element -through the function boyle().
In the following example, range element is used to change the radius and the intensity of the colour of a circle, while using a script.
< input type="range" id="Range1" min="10" max="255" value="50" onChange="radius()" >
Once again, we use the onChange event of the range element along with JavaScript. The color the sphere is changed with the use of CSS.
Input Type - number
This is a very useful textbox controls to deal with numbers, sometimes restricting them to a certain range.
< input type = "number" name = "age" min = "5" max = "95" >
The textbox will not allow you to enter a number that is less than 5 or greater than 95. Enter a number and then press the Enter button to see its use. The great thing about this control is that it produces the error on its own in the event of a wrong number being entered; the user does not have to use script languages for it.
Input Type - button
HTML5 buttons are important for sending information to servers as well text-muted as for calculations, ranging from simple to more complex.
< input type = "button" onclick = "alert('Welcome to Vivax Solutions!')" value = "Click to be Greeted!" >
The buttons responds to onClick event; when JavaScript functions are attached to the event, this can be achieved. If you click the above, you will see it.
Next
Previous