HTML Feedback
Apèsi sou lekòl la: 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.
Entwodiksyon:
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>
<tèt>
<title> Sample HTML </title>
<meta name=”Generator” content=”EditPlus”>
<meta name=”Author” content=””>
<meta name=”Keywords” content=””>
<meta name=”Description” content=””>
</tèt>
<kò>
<form name=”D '” action=”html_form_action.jsp” method=”get”>
Username: <D 'kalite =”tèks” name=”user”><br>
Password: <D 'kalite =”password” name=”pwd”><br>
<D 'kalite =”radio” name=”sex” value=”male”>Male<br>
<D 'kalite =”radio” name=”sex” value=”female”>Female<br>
<D 'kalite =”checkbox” name=”vehicle” value=”Bike”>I have a bike<br>
<D 'kalite =”checkbox” name=”vehicle” value=”Car”>I have a car <br>
<D 'kalite =”submit” value=”Soumèt”>
</fòm>
</kò>
</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.
- Non: This is used to provide a name to the individual form and is required when we need to access individual components of a form.
- Aksyon: 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>
<tèt>
<title> Egzanp 2 </title>
<meta name=”Generator” content=”EditPlus”>
<meta name=”Author” content=””>
<meta name=”Keywords” content=””>
<meta name=”Description” content=””>
</tèt>
<kò>
<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 />
Comment:<br />
<textarea name=’comment’ id=’comment’ /></textarea><br />
<input type=’hidden’ name=’articleid’ id=’articleid’ valè = ',en<? echo $_GET[“id”]; ?>’ />
<input type=’submit’ value=’Submit’ />
</fòm>
</kò>
</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. Tou depan de kondisyon an biznis fòm nan ka swa voye done yo nan kèk lòt paj pou plis pwosesis oswa travay sou done yo ak pwodwi kèk pwodiksyon nan itilizatè a. Lè yo done yo pase bay yon script pou yo travay sou nou itilize swa 'jwenn’ oswa 'pòs’ metòd.
Tags Fòm HTML:
fòm HTML gen Tags sa yo itilize souvan:
- fòm : itilize yo defini yon fòm HTML pou D 'itilizatè. brib sa a montre ki jan nou ka sèvi ak li :
Listing 3 : Sèvi ak nan fòm html
[Code]
<aksyon fòm =”demo.asp” method=”get”>
Premye non: <D 'kalite =”tèks” name=”fname”><br>
Siyati: <D 'kalite =”tèks” name=”lname”><br>
<D 'kalite =”submit” value=”Soumèt”>
</fòm>
[/Code]
se tag sa a sipòte yo nan prèske tout navigatè yo.
- D ': itilize yo defini yon kontwòl D '. Egzanp Kòd ki nan lis nan lis 3 kapab yon bon egzanp. se tag sa a sipòte yo nan prèske tout navigatè yo.
- textarea: itilize yo defini yon D 'multiligne tèks. brib sa a montre ki jan nou ka sèvi ak li :
Listing 4: Sèvi ak nan html fòm Tèkstarea
[Code]
<aksyon fòm =”demo.asp” method=”get”>
<ranje Tèkstarea =”4″ kol =”50″>
Yon rena rapid mawon sote dwa sou yon chen parese. </textarea>
</fòm>
[/Code]
se tag sa a sipòte yo nan prèske tout navigatè yo.
- mete etikèt sou : used to define a label for an input element. brib sa a montre ki jan nou ka sèvi ak li :
Listing 5: Sèvi ak nan fòm html – mete etikèt sou
[Code]
<aksyon fòm =”demo.asp”>
<label for=”male”>Male</mete etikèt sou>
<D 'kalite =”radio” name=”sex” id=”male” value=”male”><br>
<label for=”female”>Female</mete etikèt sou>
<D 'kalite =”radio” name=”sex” id=”female” value=”female”><br>
<D 'kalite =”submit” value=”Soumèt”>
</fòm>
[/Code]
se tag sa a sipòte yo nan prèske tout navigatè yo.
- fieldset : used to group similar information together. brib sa a montre ki jan nou ka sèvi ak li :
Listing 6: Sèvi ak nan fòm html – fieldset
[Code]
<fòm>
<fieldset>
<legend>Personal Information </legend>
Non: <D 'kalite =”tèks” size=”30″><br>
Email: <D 'kalite =”tèks” size=”30″><br>
Date of birth: <D 'kalite =”tèks” size=”10″>
</fieldset>
</fòm>
[/Code]
se tag sa a sipòte yo nan prèske tout navigatè yo.
- legend: used to define the caption of the filedset element. Code snippet given in listing 6 is an example of how to use it. se tag sa a sipòte yo nan prèske tout navigatè yo.
- select: used to create a drop down list. brib sa a montre ki jan nou ka sèvi ak li
Listing 7: Sèvi ak nan fòm html – 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]
se tag sa a sipòte yo nan prèske tout navigatè yo.
- optgroup : used to define a group of related options in a dropdown list. brib sa a montre ki jan nou ka sèvi ak li :
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]
se tag sa a sipòte yo nan prèske tout navigatè yo.
- 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. se tag sa a sipòte yo nan prèske tout navigatè yo.
- bouton : used to define a clickable button. The submit button in listing 1 or listing 2 is a good example of its usage. se tag sa a sipòte yo nan prèske tout navigatè yo.
- datalist : used to specify a list of pre-defined options for input controls. This is a new tag introduced in html 5. brib sa a montre ki jan nou ka sèvi ak li :
Listing 9: Sèvi ak nan fòm html – 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. brib sa a montre ki jan nou ka sèvi ak li :
Listing 10: Use of html form keygen
[Code]
<aksyon fòm =”demo.asp” method=”get”>
Username: <D 'kalite =”tèks” name=”usr_name”>
Encryption: <keygen name=”sekirite”>
<D 'kalite =”submit”>
</fòm>
[/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. brib sa a montre ki jan nou ka sèvi ak li :
Listing 11: Use of html form keygen
[Code]
<form oninput=”x.value=parseInt(a.value)+parseInt(b.value)”>0
<D 'kalite =”range” id=”yon” value=”50″>100
+<D 'kalite =”number” id=”b” value=”50″>
=<output name=”x” for=”a b”></output>
</fòm>
[/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 –
- metòd.
- action.
- non.
- HTML form has the following tags –
- fòm.
- D '.
- textarea.
- mete etikèt sou.
- fieldset.
- legend.
- select.
- optgroup.
- option.
- bouton.
- datalist.
- keygen.
- output.
