HTML Feedback
Ülevaade: 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.
Sissejuhatus:
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>
<pea>
<pealkiri> Sample HTML </pealkiri>
<meta name =”Generator” content =”EditPlus”>
<meta name =”Author” content =””>
<meta name =”Keywords” content =””>
<meta name =”Kirjeldus” content =””>
</pea>
<keha>
<form name=”input” action=”html_form_action.jsp” method=”saama”>
Username: <input type =”text” name=”user”><br>
Password: <input type =”password” name=”pwd”><br>
<input type =”radio” name=”sex” value=”male”>Male<br>
<input type =”radio” name=”sex” value=”female”>Female<br>
<input type =”kast” name=”vehicle” value=”Bike”>I have a bike<br>
<input type =”kast” name=”vehicle” value=”Car”>I have a car <br>
<input type =”submit” value=”Esitama”>
</vorm>
</keha>
</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.
- Nimi: This is used to provide a name to the individual form and is required when we need to access individual components of a form.
- tegevus: 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>
<pea>
<pealkiri> Example 2 </pealkiri>
<meta name =”Generator” content =”EditPlus”>
<meta name =”Author” content =””>
<meta name =”Keywords” content =””>
<meta name =”Kirjeldus” content =””>
</pea>
<keha>
<form method=’post’>
NIMI: <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 />
Comment:<br />
<textarea name=’comment’ id=’comment’ /></textarea><br />
<input type=’hidden’ name=’articleid’ id=’articleid’ value='<? echo $_GET[“ID”]; ?>’ />
<input type=’submit’ value=’Submit’ />
</vorm>
</keha>
</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’ meetod.
HTML Form tags:
HTML form has the following tags used commonly:
- vorm : 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=”saama”>
First name: <input type =”text” name=”fname”><br>
Last name: <input type =”text” name=”lname”><br>
<input type =”submit” value=”Esitama”>
</vorm>
[/Code]
This tag is supported in almost all the browsers.
- input: 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=”saama”>
<textarea rows=”4″ cols=”50″>
A quick brown fox jumps right over a lazy dog. </textarea>
</vorm>
[/Code]
This tag is supported in almost all the browsers.
- label : määratlemiseks kasutatakse silt sisend 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>
<input type =”radio” name=”sex” id =”male” value=”male”><br>
<label for =”female”>Female</label>
<input type =”radio” name=”sex” id =”female” value=”female”><br>
<input type =”submit” value=”Esitama”>
</vorm>
[/Code]
This tag is supported in almost all the browsers.
- fieldset : kasutatud grupi sarnast teavet koos. The following snippet shows how can we use it :
Listing 6: Use of html form – fieldset
[Code]
<vorm>
<fieldset>
<legend>Isiklik informatsioon </legend>
Nimi: <input type =”text” size =”30″><br>
Email: <input type =”text” size =”30″><br>
Sünnikuupäev: <input type =”text” size =”10″>
</fieldset>
</vorm>
[/Code]
This tag is supported in almost all the browsers.
- legend: määratlemiseks kasutatakse pealdis on filedset element. Koodijupi toodud loetelu 6 on näide, kuidas seda kasutada. This tag is supported in almost all the browsers.
- select: kasutatakse, et luua rippmenüüst. The following snippet shows how can we use it
Listing 7: Use of html form – select
[Code]
<select>
<optsiooni väärtus =”volvo”>Volvo</valik>
<optsiooni väärtus =”Saab”>Saab</valik>
<optsiooni väärtus =”Mercedes”>Mercedes</valik>
<optsiooni väärtus =”audi”>Audi</valik>
</select>
[/Code]
This tag is supported in almost all the browsers.
- optgroup : määratlemiseks kasutatakse grupi omavahel seotud valikuid rippmenüüst. The following snippet shows how can we use it :
Listing 8: Kasuta html kujul optgroup
[Code]
<select>
<optgroup label =”Rootsi Autod”>
<optsiooni väärtus =”volvo”>Volvo</valik>
<optsiooni väärtus =”Saab”>Saab</valik>
</optgroup>
<optgroup label =”Saksa autod”>
<optsiooni väärtus =”Mercedes”>Mercedes</valik>
<optsiooni väärtus =”audi”>Audi</valik>
</optgroup>
<optgroup label =”Jaapani autod”>
<optsiooni väärtus =”Honda”>Honda</valik>
<optsiooni väärtus =”hundai”>Hundai</valik>
<optsiooni väärtus =”Suzuki”>Suzuki</valik>
</optgroup>
</select>
[/Code]
This tag is supported in almost all the browsers.
- valik : määratlemiseks kasutatakse ühe variandina rippmenüüst. Koodijupi toodud loetelu 7 and listing 8 on hea näide sellest, kuidas seda kasutada. This tag is supported in almost all the browsers.
- nupp : määratlemiseks kasutatakse klikitav nupp. Submit nuppu nimekirja 1 või noteerimise 2 on hea näide selle kasutamine. This tag is supported in almost all the browsers.
- DataList : saab määrata nimekirja ettemääratud võimalusi sisendi kontroll. 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”>
<optsiooni väärtus =”Internet Explorer”>
<optsiooni väärtus =”Firefox”>
<optsiooni väärtus =”Chrome”>
<optsiooni väärtus =”Opera”>
<optsiooni väärtus =”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=”saama”>
Username: <input type =”text” name=”usr_name”>
Encryption: <keygen name=”turvalisus”>
<input type =”submit”>
</vorm>
[/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
<input type =”range” id =”a” value=”50″>100
+<input type =”number” id =”b” value=”50″>
=<output name=”x” for=”a b”></output>
</vorm>
[/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 –
- meetod.
- action.
- nimi.
- HTML form has the following tags –
- vorm.
- input.
- textarea.
- label.
- fieldset.
- legend.
- select.
- optgroup.
- valik.
- nupp.
- DataList.
- keygen.
- output.
