html forms
TRANSCRIPT
![Page 1: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/1.jpg)
HTML FormsPresentation by Nobel Mujuji Bsc. Hons (WUA) 2009
![Page 2: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/2.jpg)
introduction
In general, if you want to collect vital information about someone or something, the form is used. What if you want to create a Web page which will collect data from the user? You can collect data from the users of your Web site by using forms. For instance, you can ask users to fill out forms to specify which products they want to order. You can also use forms to collect feedback about your site.
HTML forms are placed on a web page using the <form></form> tag. This tag should encapsulate a series of other form elements, identifying them as a single cohesive web form.
HTML form elements rely on action and method attributes to identify where to send the form data for processing (action) and how to process the data (method). In the code above, we've inserted some make-believe values to represent what a typical HTML form might look like behind the scenes.
Unfortunately, HTML alone is unable to process form data. A scripting language such as PHP, PERL, and/or JavaScript must be used with HTML forms to process data captured by HTML form elements
![Page 3: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/3.jpg)
The <input> Element
The <input> element is the most important form element. The <input> element has many variations, depending on the type attribute.
![Page 4: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/4.jpg)
types of input element
Type Description
text Defines normal text input
radio Defines radio button input (for selecting one of many choices)
submit Defines a submit button (for submitting the form)
![Page 5: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/5.jpg)
Example
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
![Page 6: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/6.jpg)
Radio Button Input
<input type="radio"> defines a radio button. Radio buttons let a user select ONE of a limited number of choices:
<form><input type="radio" name="sex" value="male" checked>Male<br><input type="radio" name="sex" value="female">Female</form>
![Page 7: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/7.jpg)
checkbox forms
Setting the type attribute of an <input> tag to checkbox places a checkbox element onto the web page.
<form name="myWebForm" action="mailto:[email protected]" method="post">
<p>Please select every sport that you play.</p>
Soccer: <input type="checkbox" name="sports" value="soccer" /><br />
Football: <input type="checkbox" name="sports" value="football" /><br />
Baseball: <input type="checkbox" name="sports" value="baseball" /><br />
Basketball: <input type="checkbox" name="sports" value="basketball" />
</form>
![Page 8: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/8.jpg)
Password Fields
HTML password fields are designed to capture user input, but disguise each character with an asterisk (*) instead of displaying the entered digits. They offer a user on-screen privacy while he or she is entering a password.
<form name="myWebForm" action="mailto:[email protected]" method="post">
Password: <input type="password" title="Please Enter Your Password" size="8" /><br />
<input type="submit" value="SUBMIT" />
</form>
![Page 9: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/9.jpg)
<form name="myWebForm" action="mailto:[email protected]" method="post">
First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12" maxlength="12" /> Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" size="18" maxlength="24" /><br />
Password: <input type="password" title="Please Enter Your Password" size="8" maxlength="8" /><br />
<input type="submit" value="SUBMIT" />
</form>
![Page 10: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/10.jpg)
Cont….
Password fields offer a very thin layer of security by visually concealing passwords; they offer no security whatsoever against maintaining the integrity of the password data. From data is processed in plain text and can be readily sniffed by a hacker, unless HTTPS is used to encrypt the data.
![Page 11: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/11.jpg)
reset buttons
A reset button allows users to basically clear their web form. It wipes values from all fields by "resetting" the form to its default appearance.
![Page 12: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/12.jpg)
upload forms
Upload fields provide the interface that allows users to select a local file and upload it to the web server. An upload field renders as two parts -- an empty text field and a Browse button that opens up a local window explorer on the user's computer. This allows them to quickly browse to the local file and automatically fills in the file path inside of the text field.
HTML Upload Field Code:
<form name="myWebForm" action="mailto:[email protected]" method="post">
<input type="file" name="uploadField" />
</form>
![Page 13: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/13.jpg)
HTML MAX_FILE_SIZE Code:
<form name="myWebForm" action="mailto:[email protected]" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="500" />
<input type="file" name="uploadField" />
</form
![Page 14: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/14.jpg)
html - textareas
An HTML textarea is an oversized Text Field capable of capturing "blurb" type information from a user. If you've ever posted on a forum or left feedback on your favorite blog, you probably do so using an HTML textarea.
<textarea name="myTextArea"cols="20" rows="10">Please limit your response to 100 characters.</textarea><br />
<textarea name="myTextArea" cols="40" rows="2">Please limit your response to 200 characters.</textarea><br />
<textarea name="myTextArea" cols="45" rows="5">Please limit your response to 500 characters.</textarea><br />
![Page 15: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/15.jpg)
html - textarea wrap
The wrap attribute refers to how the user input reacts when it reaches the end of each row in the text field. Wrapping can be defined using one of three values:
1. soft
2. hard
3. off
![Page 16: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/16.jpg)
HTML Text Area Word Wrap Code:
<textarea cols="20" rows="5" wrap="hard">
As you can see many times word wrapping is often the desired look for your textareas. Since it makes everything nice and easy to read and preserves line breaks.
</textarea>
![Page 17: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/17.jpg)
html - text areas: readonly
Setting a "yes" or "no" value for the readonly attribute determines whether or not a viewer has permission to manipulate the text inside the text field.
HTML Readonly Attribute:
<textarea cols="20" rows="5" wrap="hard" readonly="yes">
As you can see many times word wrapping is often the desired look for your text areas. Since it makes everything nice and easy to read.
</textarea>
![Page 18: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/18.jpg)
html - text areas: disabled
Disabling the textarea altogether prevents the surfer from highlighting, copying, or modifying the field in any way. To accomplish this, set the disabled property to "yes".
HTML Code:
<textarea cols="20" rows="5" wrap="hard" disabled="yes">
As you can see many times word wrapping is often the desired look for your text areas. Since it makes everything nice and easy to read.
</textarea>
![Page 19: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/19.jpg)
The Submit Button
<input type="submit"> defines a button for submitting a form to a form-handler. The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute:
Example
<form action="action_page.php">First name:<br><input type="text" name="firstname" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Submit"></form>
![Page 20: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/20.jpg)
The Action Attribute
The action attribute defines the action to be performed when the form is submitted. The common way to submit a form to a server, is by using a submit button. Normally, the form is submitted to a web page on a web server. In the example above, a server-side script is specified to handle the submitted form:
![Page 21: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/21.jpg)
<form action="action_page.php">
If the action attribute is omitted, the action is set to the current page.
![Page 22: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/22.jpg)
The Method Attribute
The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms:
<form action="action_page.php" method="GET">
or:
<form action="action_page.php" method="POST">
![Page 23: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/23.jpg)
When to Use GET?
You can use GET (the default method): If the form submission is passive (like a search engine query), and without sensitive information. When you use GET, the form data will be visible in the page address:
action_page.php?firstname=Mickey&lastname=Mouse
GET is best suited to short amounts of data. Size limitations are set in your browser.
![Page 24: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/24.jpg)
When to Use POST?
You should use POST: If the form is updating data, or includes sensitive information (password). POST offers better security because the submitted data is not visible in the page address.
![Page 25: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/25.jpg)
<form> attributes:Attribute Description
accept-charset Specifies the charset used in the submitted form (default: the page charset).
action Specifies an address (url) where to submit the form (default: the submitting page).
autocomplete Specifies if the browser should autocomplete the form (default: on).
enctype Specifies the encoding of the submitted data (default: is url-encoded).
method Specifies the HTTP method used when submitting the form (default: GET).
name Specifies a name used to identify the form (for DOM usage: document.forms.name).
novalidate Specifies that the browser should not validate the form.
target Specifies the target of the address in the action attribute (default: _self).
![Page 26: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/26.jpg)
The <select> Element (Drop-Down List)
The <select> element defines a drop-down list:
<select name="cars">
<option value="volvo">Volvo</option>
<option value=“hundai">hundai</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
![Page 27: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/27.jpg)
The <textarea> Element
The <textarea> element defines a multi-line input field (a text area):
Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
![Page 28: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/28.jpg)
The <button> Element
The <button> element defines a clickable button:
Example
<button type="button" 'Hello World!')">Click Me!</button>
![Page 29: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/29.jpg)
HTML5 <datalist> Element
The <datalist> element specifies a list of pre-defined options for an <input> element. Users will see a drop-down list of pre-defined options as they input data.
The list attribute of the <input> element, must refer to the id attribute of the <datalist> element.
![Page 30: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/30.jpg)
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
![Page 31: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/31.jpg)
<keygen> Element
The purpose of the <keygen> element is to provide a secure way to authenticate users. The <keygen> element specifies a key-pair generator field in a form. When the form is submitted, two keys are generated, one private and one public. The private key is stored locally, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future.
![Page 32: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/32.jpg)
<output> Element
The <output> element represents the result of a calculation (like one performed by a script).<form action="action_page.asp">0<input type="range" id="a" name="a" value="50">100 +<input type="number" id="b" name="b" value="50">=<output name="x" for="a b"></output><br><br><input type="submit"></form>
![Page 33: Html forms](https://reader030.vdocument.in/reader030/viewer/2022032617/55aa392f1a28ab41118b46d3/html5/thumbnails/33.jpg)
new in HTML5.Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation