Html programming crash course (2015)
Chapter 4: Web Form Controls
|
In this chapter, you will learn about web form controls, including: • Introduction to web form controls • Web forms example • Create a default control |
HTML has always offered support for form controls through the use of <input> element. This includes text boxes:
|
<input name=”text” type=”text”> |
And radio buttons:
|
<input name=”radio” type=”radio”> |
Such controls can be created using the <input> element along with the type of attribute set to the type of control you wish to have (radio buttons, check boxes, text fields). You will have to set the name attribute to the name of control because you will need to reference it in the code.
HTML5 increases the variety of form controls that are available to the developer. It has added numerous controls, including numeric range control and date-time picker. The focus of this lesson would be to learn about what’s new in HTML5 web form controls.
Introduction To Web Form Controls
As previously mentioned, a web form control can be created using <input> element.
Element: <input>
Required Attributes: You state the web form control that you need along with its type attribute.
Supported Browsers: Opera
The following web controls are offered by HTML5:
|
Type |
Control Type |
|
button |
A button |
|
checkbox |
A check box |
|
color |
A color well |
|
date |
A date control |
|
datetime |
A date and time control |
|
datetime-local |
A date and time control |
|
|
A text field |
|
file |
A label and a button |
|
hidden |
n/a |
|
image |
A clickable button or image |
|
month |
A month control |
|
number |
A spinner control or text field |
|
password |
Text field that hides data entry |
|
radio |
A radio button |
|
range |
A slide control |
|
reset |
A button |
|
search |
Search field |
|
submit |
A button |
|
tel |
A text field |
|
text |
Text field |
|
time |
A time control |
|
url |
A text field |
|
week |
A week control |
Web Forms Example
We will now use the new HTML5 controls. Follow the steps below to get started:
1. Using a text editor, create webform.html.
2. To create an HTML table that will hold the web form controls, enter the following code. Also, you will be adding a Submit button.
|
<!DOCTYPE html> <html> <head> <title> Web Form Example </title> </head> <body> <h1>Web Form Example</h1> <form method=”post” action=”webforms.php”> <table border=”1” cellpadding=”5”> . . . <input type=”submit” value=”Submit”> </form> </body> </html> |
3. Save webform.html, ensuring that you save it in a text format.
Now that you have created the page, it is time to add a few web form controls.
Create A Default Control
If a developer does not specify the type of control, a text field is created by default, as shown below.
1. Open webform.html using your favorite text editor.
2. Add the code given below, and make sure that you do not specify any attribute. Pay attention to the autofocus attribute; this will make a blinking cursor appear in the text box as soon as the page loads. Also, the placeholder attribute will enable you to set placeholder text. The following code will not work in any browser as of yet.
|
<!DOCTYPE html> <html> <head> <title> Web Form Example </title> </head> <body> <h1>Web Form Example</h1> <form method=”post” action=”webforms.php”> <table border=”1” cellpadding=”5”> <tr> <td>Default</td><td><input name=”name” placeholder=”Enter your nickname” autofocus> </td> </tr> . . . <input type=”submit” value=”Submit”> </form> </body> </html> |
3. Save the file in text format.
URL Control Example
While you can now create as many controls as you want, here is an example that will show you how to create a URL control:
1. Open webform.html and add the code below to create a URL field:
|
<!DOCTYPE html> <html> <head> <title> Web Form Example </title> </head> <body> <h1>Web Form Example</h1> <form method=”post” action=”webforms.php”> <table border=”1” cellpadding=”5”> <tr> <td>Default</td><td><input name=”name” placeholder=”Enter your nickname” autofocus> </td> </tr> <tr> <td>URL</td><td><input name=”url” type=”url”></td> </tr> . . . <input type=”submit” value=”Submit”> </form> </body> </html> |
2. Save the file in text format.
The above code will make the browser format text entered by you into a proper URL. It will show an error if it cannot do it.
You can create other web form controls in a similar manner.
Summary
HTML5 increases the variety of form controls that are available to the developer.
A web form control can be created using <input> element.
If a developer does not specify the type of control, a text field is created by default.