HTML Feedback
Огляд: In this document we will talk about HTML Forms and their usage. HTML forms are an essential part of modern web site development irrespective of any technology.
Введення:
An HTML form on a web page enables a user to provide inputs to an application. The data entered by the user is then sent to the server for further processing or storing in the database. A sample html form is given as under:
Listing 1: Sample HTML Form
[Code]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “HTTP://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title> Sample HTML </title>
<meta name=”Generator” content=”EditPlus”>
<meta name=”Author” content=””>
<meta name=”Keywords” content=””>
<meta name=”Опис” content=””>
</head>
<body>
<form name=”вхід” action=”html_form_action.jsp” method=”get”>
Username: <тип входу =”text” name=”user”><бр>
Password: <тип входу =”password” name=”pwd”><бр>
<тип входу =”radio” name=”sex” value=”male”>Male<бр>
<тип входу =”radio” name=”sex” value=”female”>Female<бр>
<тип входу =”checkbox” name=”vehicle” value=”Bike”>I have a bike<бр>
<тип входу =”checkbox” name=”vehicle” value=”Car”>I have a car <бр>
<тип входу =”submit” value=”Підкорятися”>
</форма>
</body>
</html>
[/Code]
The above code produces a basic HTML form having the following fields:
- Text field for providing Username.
- Password field to provide Password.
- Radio button to provide the sex either male or female.
- Check box to indicate the type of vehicle the user owns.
Attributes in HTML form:
HTML form has the following attributes which are most commonly used:
- Method: This can have value either of the two values : ‘get’ or ‘post’. ‘post’ is used when we need to submit some information which needs to be stored in a persistent data storage. ‘get’ is used when we need to retrieve some information based on the input value which is submitted.
- Назва: This is used to provide a name to the individual form and is required when we need to access individual components of a form.
- Action: This attribute contains the name of the file which operates on the fields entered by the user. It also holds the functions, hidden fields definitions which are required to perform a task.
Gathering and submitting the form data:
Let us consider the following code snippet
Listing 2: Sample HTML form code snippet
[Code]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “HTTP://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title> приклад 2 </title>
<meta name=”Generator” content=”EditPlus”>
<meta name=”Author” content=””>
<meta name=”Keywords” content=””>
<meta name=”Опис” content=””>
</head>
<body>
<form method=’post’>
NAME: <input type=’text’ name=’name’ id=’name’ /><br />
Email: <input type=’text’ name=’email’ id=’email’ /><br />
Website: <input type=’text’ name=’website’ id=’website’ /><br />
Коментувати:<br />
<textarea name=’comment’ id=’comment’ /></textarea><br />
<input type=’hidden’ name=’articleid’ id=’articleid’ value='<? echo $_GET[“id”]; ?>’ />
<input type=’submit’ value=’Submit’ />
</форма>
</body>
</html>
[/Code]
The above html code snippet is a simple user information form that a user needs to fill out and hit the submit button. Once the submit button is hit by the user, the form gathers all the data and sends it to another script for further processing. Depending upon the business requirement the form can either send the data to some other page for further processing or process the data and produce some output to the user. When the data is passed to a script for processing we use either ‘get’ or ‘post’ метод.
HTML Form tags:
HTML form has the following tags used commonly:
- форма : used to define an HTML form for user input. The following snippet shows how can we use it :
Listing 3 : Use of html form
[Code]
<form action=”demo.asp” method=”get”>
First name: <тип входу =”text” name=”fname”><бр>
Last name: <тип входу =”text” name=”lname”><бр>
<тип входу =”submit” value=”Підкорятися”>
</форма>
[/Code]
This tag is supported in almost all the browsers.
- вхід: used to define an input control. Sample code listed in listing 3 can be a good example. This tag is supported in almost all the browsers.
- textarea: used to define a multiline text input. The following snippet shows how can we use it :
Listing 4: Use of html form textarea
[Code]
<form action=”demo.asp” method=”get”>
<textarea rows=”4″ cols=”50″>
A quick brown fox jumps right over a lazy dog. </textarea>
</форма>
[/Code]
This tag is supported in almost all the browsers.
- label : used to define a label for an input element. The following snippet shows how can we use it :
Listing 5: Use of html form – label
[Code]
<form action=”demo.asp”>
<label for=”male”>Male</label>
<тип входу =”radio” name=”sex” id=”male” value=”male”><бр>
<label for=”female”>Female</label>
<тип входу =”radio” name=”sex” id=”female” value=”female”><бр>
<тип входу =”submit” value=”Підкорятися”>
</форма>
[/Code]
This tag is supported in almost all the browsers.
- fieldset : used to group similar information together. The following snippet shows how can we use it :
Listing 6: Use of html form – fieldset
[Code]
<форма>
<fieldset>
<legend>Personal Information </legend>
Назва: <тип входу =”text” size=”30″><бр>
Email: <тип входу =”text” size=”30″><бр>
Date of birth: <тип входу =”text” size=”10″>
</fieldset>
</форма>
[/Code]
This tag is supported in almost all the browsers.
- legend: used to define the caption of the filedset element. Code snippet given in listing 6 is an example of how to use it. This tag is supported in almost all the browsers.
- select: used to create a drop down list. The following snippet shows how can we use it
Listing 7: Use of html form – select
[Code]
<select>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
<option value=”mercedes”>Mercedes</option>
<option value=”audi”>Audi</option>
</select>
[/Code]
This tag is supported in almost all the browsers.
- optgroup : used to define a group of related options in a dropdown list. The following snippet shows how can we use it :
Listing 8: Use of html form optgroup
[Code]
<select>
<optgroup label=”Swedish Cars”>
<option value=”volvo”>Volvo</option>
<option value=”saab”>Saab</option>
</optgroup>
<optgroup label=”German Cars”>
<option value=”mercedes”>Mercedes</option>
<option value=”audi”>Audi</option>
</optgroup>
<optgroup label=”Japanese Cars”>
<option value=”honda”>Honda</option>
<option value=”hundai”>Hundai</option>
<option value=”suzuki”>Suzuki</option>
</optgroup>
</select>
[/Code]
This tag is supported in almost all the browsers.
- option : used to define an option in a dropdown list. Code snippet given in listing 7 and listing 8 are a good example of how to use it. This tag is supported in almost all the browsers.
- button : used to define a clickable button. The submit button in listing 1 or listing 2 is a good example of its usage. This tag is supported in almost all the browsers.
- datalist : used to specify a list of pre-defined options for input controls. This is a new tag introduced in html 5. The following snippet shows how can we use it :
Listing 9: Use of html form – datalist
[Code]
<input list=”browsers”>
<datalist id=”browsers”>
<option value=”Internet Explorer”>
<option value=”Firefox”>
<option value=”Chrome”>
<option value=”Opera”>
<option value=”Safari”>
</datalist>
[/Code]
This tag is supported in Internet Explorer 10, Firefox, Opera, and Chrome. This is not supported in Internet Explorer 9 or earlier version or on safari browsers.
- keygen : used to define a key-value pair. This is a new tag introduced in html 5. The following snippet shows how can we use it :
Listing 10: Use of html form keygen
[Code]
<form action=”demo.asp” method=”get”>
Username: <тип входу =”text” name=”usr_name”>
Encryption: <keygen name=”security”>
<тип входу =”submit”>
</форма>
[/Code]
This tag is supported in Firefox, Opera, Chrome and safari browsers.
- output: used to define the output of a calculation. This is a new tag introduced in html 5. The following snippet shows how can we use it :
Listing 11: Use of html form keygen
[Code]
<form oninput=”x.value=parseInt(a.value)+parseInt(b.value)”>0
<тип входу =”range” id=”a” value=”50″>100
+<тип входу =”number” id=”б” value=”50″>
=<output name=”x” for=”a b”></output>
</форма>
[/Code]
This tag is supported in Firefox, Opera, Chrome and safari browsers.
Summary:
Let us summarize our discussion in the following bullets as under –
- HTML form is used to provide input to an application.
- HTML form has the following attributes –
- метод.
- action.
- назва.
- HTML form has the following tags –
- форма.
- вхід.
- textarea.
- label.
- fieldset.
- legend.
- select.
- optgroup.
- option.
- button.
- datalist.
- keygen.
- output.
