Web Form Controls - Html programming crash course (2015)

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

email

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.