html forms
Post on 17-Nov-2014
95 Views
Preview:
DESCRIPTION
TRANSCRIPT
WEB ENGINEERING nisa1207@gmail.com
Prog_nisa@quest.edu.pk
2
OUTLINES
HTML Marquees
How forms work
The form element
POST versus GET
Variables and values
Form controls
Form accessibility features
3
<MARQUEE>An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your webpage depending on the settings. This is created by using HTML <marquees> tag.
4
<MARQUEE>
SyntaxA simple syntax to use HTML <marquee> tag is as follows:
<marquee attribute_name="attribute_value"....more attributes>
One or more lines or text message or image
</marquee>
5
THE <MARQUEE> TAG ATTRIBUTESAttribute Descriptionwidth This specifies the width of the marquee. This can be a
value like 10 or 20% etc.height This specifies the height of the marquee. This can be a
value like 10 or 20% etc.direction This specifies the direction in which marquee should
scroll. This can be a value like up, down, left or right.behavior This specifies the type of scrolling of the marquee. This
can have a value like scroll, slide and alternate.scrolldelay This specifies how long to delay between each jump. This
will have a value like 10 etc.
6
THE <MARQUEE> TAG ATTRIBUTESAttribute Descriptionscrollamount This specifies the speed of marquee text. This can
have a value like 10 etc.loop This specifies how many times to loop. The default
value is INFINITE, which means that the marquee loops endlessly.
bgcolor This specifies background color in terms of color name or color hex value.
hspace This specifies horizontal space around the marquee. This can be a value like 10 or 20% etc.
vspace This specifies vertical space around the marquee. This can be a value like 10 or 20% etc.
7
THE <MARQUEE> - EXAMPLE<!DOCTYPE html><html>
<head><title>HTML marquee Tag</title>
</head><body>
<marquee>This is basic example of marquee</marquee></body>
</html>
8
HTML FORMS
9
HOW FORMS WORKThere are two parts to a working form. The first part is the form that you see on the page itself that is created using HTML markup. Forms are made up of buttons, input fields, and drop-down menus (collectively known as form controls) used to collect information from the user. Forms may also contain text and other elements.
10
HOW FORMS WORKThe other component of a web form is an application or script on the server that processes the information collected by the form and returns an appropriate response. It’s what makes the form work. In other words, posting an HTML document with form elements isn’t enough. Web applications and scripts require programming.
11
WHAT HAPPENS BEHIND THE SCENES WHEN A WEB FORM IS SUBMITTED
12
13
14
THE FORM ELEMENT
<form>...</form> :Interactive formForms are added to web pages using (no surprise here) the form element. The form element is a container for all the content of the form, including some number of form controls, such as text entry fields and buttons. It may also contain block elements (h1, p, and lists, for example). However, it may not contain another form element.
15
HTML FORMS HTML Forms are used to select different kinds of user input. HTML forms are used to pass data to a server. An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more.
A form can also contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:
<form>.input elements.</form>
16
HTML FORMSThe HTML <form> tag is used to create an HTML form and it has following syntax:
<form action="Script URL" method="GET|POST">
form elements like input, textarea etc.
</form>
17
FORM ATTRIBUTESAttribute
Description
action Backend script ready to process your passed data.
method Method to be used to upload data. The most frequently used are GET and POST methods.
target Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc.
enctype You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values are:•application/x-www-form-urlencoded - This is the standard method most forms use in simple scenarios.•mutlipart/form-data - This is used when you want to upload binary data in the form of files like image, word file etc.
18
HTML FORM CONTROLSText Input Controls
Checkboxes Controls
Radio Box Controls
Select Box Controls
File Select boxes
Hidden Controls
Clickable Buttons
Submit and Reset Button
19
HTML FORMS - THE INPUT ELEMENTThe <input> element is used to select user information.
An <input> element can vary in many ways, depending on the type attribute.
An <input> element can be of type text field, checkbox, password, radio button, submit button, and more.
20
TEXT INPUT CONTROLSThere are three types of text input used on forms:
Single-line text input controls - This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.
Password input controls - This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTMl <input> tag.
Multi-line text input controls - This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.
21
22
SINGLE-LINE TEXT INPUT CONTROLSdefines a one-line input field that a user can enter text into:
<form>First name: <input type="text" name="firstname"> <br />Last name: <input type="text" name="lastname"></form>
23
INPUT TYPE=“TEXT”Attribute Description
type Indicates the type of input control and for text input control it will be set to text.
name Used to give a name to the control which is sent to the server to be recognized and get the value.
value This can be used to provide an initial value inside the control.
size Allows to specify the width of the text-input control in terms of characters.
maxlength Allows to specify the maximum number of characters a user can enter into the text box.
24
PASSWORD INPUT CONTROLSDefines a password field:
<form>Password: <input type="password" name="pwd"></form>
Note: The characters in a password field are masked (shown as asterisks or circles).
25
PASSWORD INPUT CONTROLSAttribute Description
type Indicates the type of input control and for password input control it will be set to password.
name Used to give a name to the control which is sent to the server to be recognized and get the value.
value This can be used to provide an initial value inside the control.
size Allows to specify the width of the text-input control in terms of characters.
maxlength Allows to specify the maximum number of characters a user can enter into the text box.
26
MULTIPLE-LINE TEXT INPUT CONTROLS
The <textarea> tag defines a multi-line text input control.
A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).
The size of a text area can be specified by the cols and rows attributes.
27
28
HTML <TEXTAREA> TAG<textarea cols="20" rows="5"> </textarea>
29
RADIO BUTTON CONTROL<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
<form><input type="radio" name="choice" value="yes“ checked="checked“> Yes <br />
<input type="radio" name="choice" value="no">No </form>
Checked attributed defines that control is preselected when page load.
30
31
RADIO BUTTON CONTROL
Attribute Description
type Indicates the type of input control and for checkbox input control it will be set to radio.
name Used to give a name to the control which is sent to the server to be recognized and get the value.
value The value that will be used if the radio box is selected.
checked Set to checked if you want to select it by default.
32
CHECKBOX CONTROLdefines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form><input type="checkbox" name="vehicle" value="Bike">I have a bike<br /><input type="checkbox" name="vehicle" value="Car">I have a car </form>
33
34
CHECKBOX BUTTON CONTROLAttribute Description
type Indicates the type of input control and for checkbox input control it will be set to checkbox.
name Used to give a name to the control which is sent to the server to be recognized and get the value.
value The value that will be used if the checkbox is selected.
checked Set to checked if you want to select it by default.
35
HTML <SELECT> TAGThe <select> element is used to create a drop-down list.
The <option> tags inside the <select> element define the available options in the list.
Tip: The <select> element is a form control and can be used in a form to collect user input.
36
HTML <SELECT> TAG<select>
<option> Web Engineering</option>
<option> Computer Programming</option>
<option> Fundamentals of Algorithms</option>
<option> Analysis of Algorithms</option>
</select>
37
38
39
HTML <SELECT> TAG<select multiple>
<option> Web Engineering</option>
<option> Computer Programming</option>
<option> Fundamentals of Algorithms</option>
<option> Analysis of Algorithms</option>
</select>
40
SELECT BOX CONTROL
Attribute Description
name Used to give a name to the control which is sent to the server to be recognized and get the value.
size This can be used to present a scrolling list box.
multiple If set to "multiple" then allows a user to select multiple items from the menu.
Following is the list of important attributes of <select> tag:
41
SELECT BOX CONTROLFollowing is the list of important attributes of <option> tag:
Attribute Description
value The value that will be used if an option in the select box is selected.
selected Specifies that this option should be the initially selected value when the page loads.
label An alternative way of labeling options
42
FILE UPLOAD BOXIf you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box. This is also created using the <input> element but type attribute is set to file.
Attribute Description
name Used to give a name to the control which is sent to the server to be recognized and get the value.
accept Specifies the types of files that the server accepts.
43
FILE UPLOAD BOX<form>
<input type="file" name="fileupload" accept="image/*" />
</form>
44
BUTTON CONTROLSThere are various ways in HTML to create clickable buttons. You can also create a clickable button using <input> tag by setting its type attribute to button. The type attribute can take the following values:Type Description
submit This creates a button that automatically submits a form.
reset This creates a button that automatically resets form controls to their initial values.
button This creates a button that is used to trigger a client-side script when the user clicks that button.
image This creates a clickable button but we can use an image as background of the button.
45
INPUT TYPE=“SUBMIT”defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:
<form name=“applicationData" action="html_form_action.php"
method="get">Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form>
46
47
INPUT TYPE=“RESET”Button used to clear all the field of form in which reset button defined.
<form name=" applicationData" action="html_form_action.php"
<input type="reset" value="Clear">
</form>
48
INPUT TYPE=“BUTTON”defines a button
<form>
<input type="button" value="clickMe" />
</form>
49
INPUT TYPE=“IMAGE”<input type="image" name="Imagebutton" src="logo.png" />
50
HTML <BUTTON> TAGThe <button> tag defines a clickable button. Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.
Tip: Always specify the type attribute for a <button> element. Different browsers use different default types for the <button> element.
<button>Click Me</button>
51
HIDDEN FORM CONTROLSHidden form controls are used to hide data inside the page which later on can be pushed to the server. This control hides inside the code and does not appear on the actual page. For example, following hidden form is being used to keep current page number. When a user will click next page then the value of hidden control will be sent to the web server and there it will decide which page has be displayed next based on the passed current page.
52
HIDDEN FORM CONTROLS<form>
<p>This is page 10</p>
<input type="hidden" name="pagename" value="10" />
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
53
REFERENCEShttp://www.tutorialspoint.com/html/html_forms.htmhttp://www.tutorialspoint.com/html/html_marquees.htm
top related