With tel, HTML5 provides a field type that is designed for use in connection with telephone numbers.
Your telephone number: <input type="tel" name="telefon">
On smartphones and tablets, clicking on the field opens the numeric keypad for entering the phone number.
Fields for internet addresses with url
Fields of type url are intended for entering internet addresses.
<input type="url" />
URL fields are automatically validated. Browsers should check whether a syntactically correct URL has actually been entered for such fields.
Output field with output
The output field can be used to output content. This is interesting in connection with JavaScript, for example. This field can be used to output variables. However, the field can also be used to output calculated values. The field is intended exclusively for data output. User input is therefore not possible.
Here is an example:
<script> /* <![CDATA[ */ function output(){ word1="Hello," word2="World!" document.forms[0][0].value=word1+word2 } /* ]]> */ </script>In this example, two variables have been declared. The contents of these variables should be displayed in the output field.
<body onload="output()"> <form action="evaluation.php" method="get" name="form"> <output name="field" /> </form> </body>
Browsers such as Opera display the desired value. Browsers that cannot do anything with output, on the other hand, show nothing.output has three attributes.
- form - The form in which the output element is contained.
- for - Establishes the reference to the fields or values to which the output field refers. The values and fields must be separated by spaces.
- name - If you enter a name, the content of the field is also transferred when the form is sent.
- value - Specifies the value of the field.output is of course also suitable for mathematical calculations. For example, you could use prompt fields to query values and then multiply them together.
<!DOCTYPE html> <html> <head> <title>output</title> <script> /* <![CDATA[ */ function multi(){ a=parseInt(prompt("Digit 1.",0)); b=parseInt(prompt("Digit 2.",0)); document.forms["form"]["result"].value=a*b; } /* ]]> */ </script> </head> <body onload="multi()"> <form action="#" method="get" name="form"> <label>The result of the multiplication:</label> <output name="result" /> </output> </form> </body> </html>If you call up the page, a prompt window opens and the first value is requested.
If you confirm the entry with OK, a second window opens. (If you click on Cancel in one of the two windows, the result will be NaN, i.e. Not a Number ).
If the second window is also confirmed with OK, the script transfers the result of the multiplication as a value to the output field.
Progress indicators with progress
A progress display can be realized using the progress element. This is interesting, for example, in connection with downloading files..gif "HTML & CSS for beginners (part 16): Forms (4)")
Google already interprets the element. Other browsers that do not recognize the element show its content.
An example:
The download is in progress ... <progress value="250" max="1000"> <span id="downloadProgress">25</span>% </progress>
The progress element has two attributes:
- max - Specifies how many steps are required in total.
- value - This is used to specify how many steps have already been completed.
The progress element only becomes really interesting when JavaScript comes into play. The best way to show how a combination of progress and JavaScript can be used is with an example.
This example is based on a form that is to be completed in several steps. The following information is requested one after the other:
- First name
- Surname
- street address
- ZIP CODE
- City
These few values could of course be queried on one page. But what if a lot of information needs to be collected from the user? Then extensive forms tend to be a deterrent. It is therefore better to split forms into several pages.
Let's assume you call up the form.
Here you are asked for your first name. The status bar below the field has been implemented using a progress element.
<fieldset id="step1" style="display: none;"> <p>First name: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Step 1 / 5</progress></p> <p><input type="button" value="Next" onclick="nextStep(2)"></p> </fieldset>
Several things are crucial in this syntax. First of all, the individual fieldset elements are set to invisible. Even if it may not look like it at first glance, the form actually only consists of one page. The individual fields have each been inserted into their own fieldset elements. And these fieldset elements(including their content) are not visible.
A JavaScript switch function is used so that the elements that are actually hidden become visible after clicking on the respective Next buttons. What this looks like will be shown later in this tutorial.
But first back to the form. By clicking on the next buttons, you are guided through the form. The progress elements show how far you have progressed.
Incidentally, it is not a big deal if a browser does not interpret the progress element. This is because these browsers then simply display the content of this element.
<progress max="5" value="1">step 1 / 5</progress>
Instead of the progress indicator, a text according to the scheme step 2 / 5 is displayed.
The form looks like this:
<form method="post" action="#"> <fieldset id="step1" style="display: none;"> <p>First name: <input type="text" name="vname" size="30"></p> <p><progress max="5" value="1">Step 1 / 5</progress></p> <p><input type="button" value="Next" onclick="nextStep(2)"></p> </fieldset> <fieldset id="step2" style="display: none;"> <p>Last name: <input type="text" name="nname" size="30"></p> <p><progress max="5" value="2">Step 2 / 5</progress></p> <p><input type="button" value="Next" onclick="nextStep(3)"></p> </fieldset> <fieldset id="step3" style="display: none;"> <p>Street: <input type="text" name="street" size="30"></p> <p><progress max="5" value="3">Step 3 / 5</progress></p> <p><input type="button" value="Next" onclick="nextStep(4)"></p> </fieldset> <fieldset id="step4" style="display: none;"> <p>PLZ: <input type="text" name="plz" size="30"></p> <p><progress max="5" value="4">Step 4 / 5</progress></p> <p><input type="button" value="Next" onclick="nextStep(5)"></p> </fieldset> <fieldset id="step5" style="display: none;"> <p>Location: <input type="text" name="location" size="30"></p> <p><progress max="5" value="5">Step 5 / 5</progress></p> <input type="submit" value="End"> </fieldset> </form>
Three things are important here:
- Each fieldset element is assigned an ID.
- All fieldset elements are set to display: none.
- The nextStep(s ) function is assigned to the buttons.
The function nextstep( n) looks like this:
<script> /* <![CDATA[ */ function naechsterSchritt(n) { switch(n) { case 1: document.getElementById('schritt1').style.display = "block"; break; case 2: document.getElementById('schritt1').style.display = "none"; document.getElementById('step2').style.display = "block"; break; case 3: document.getElementById('step2').style.display = "none"; document.getElementById('step3').style.display = "block"; break; case 4: document.getElementById('step3').style.display = "none"; document.getElementById('step4').style.display = "block"; break; case 5: document.getElementById('step4').style.display = "none"; document.getElementById('step5').style.display = "block"; break default: break; } } } nextstep(1); /* ]]> */ </script>
This function displays the current fieldset element and hides the other fieldset elements. Make sure to place the function after the definition of the fields. It is therefore best to place it after the closing </form>.
