HTML Forms

Textbox

Button

Checkbox

DropDown list
 HTML Forms
► Created to make web pages interactive, allowing
users to enter requested information to be
submitted for processing.
► Format:
<form attr1=”val1” attr2=”val2” . . .> </form>
► Attributes of Form tag:
 action – specifies the address to where the form is
submitted.
 method – used for sending the information in the form.
Get – appends the values of the form to the end of the
action address.
Post – only the action address is visible, the data are
hidden. Example: <form action=“submit.html” method=“post”>
 Form’s Input Tag
► Used to accept data from the user

► Format:
<input type=”val1” name=”val2” value=“val3”>
Note: No closing tag required

► Attributes of Input Tag:

 name – specifies the name of the interactive input tag
 type – method of sending the information in the form.
 Value – initial value of the input tag
 Possible Values of Type:
► text – creates a single line text input box.

A text field: <input type="text" name=“TXT" value="with an

initial value“>

► password – same as textbox but with input mask for

security reasons

A password field: <input type="password" name=“PW"

value="secret">
 Possible Values of Type:
► checkbox – creates a checkbox .

A checkbox:<input type="checkbox" name=“CB”

value="checkbox" checked>

► radio– creates a list of alternatives of which only one

can be selected.
Radio buttons: <input type="radio" name=“RB“ value=“M">
male<br>
<input type="radio" name=“RB" value=“F"
checked>female
 Possible Values of Type:
► submit – creates a button that submits the form
when checked.
► reset – creates a button that clears the whole form
and loads the default values

A submit button: <input type="submit" name="S1"

value="Submit">
A reset button: <input type="reset" name="S2"
value="Reset">
A plain button: <input type="button" name="S3"
value="Push Me">
 Attributes of Select Tag:
► Format:
<select name=”val1” size=”val2” > </select>
 name – specifies the name of the list
 size – specifies the number of items to be visible when
the drop down menu is clicked.
 option value - sets the value of an item

► Attributesof Option Tag:

<option attr1=”val1” attr2=”val2” . . .>
 value – sets the value of the item
 selected – pre-selects the item by default
Examples of Select tag
 Attributes of Text Area Tag
► Creates a multi-lined text input box. Any text
placed in between these tags will be displayed in
the text area by default.
► Format:
<textarea attr1=”val1” attr2=”val2” . . .> </textarea>
Attributes:
• name –name of the text area
• rows –number of rows as the height of the text box
• column –width of the text box
• wrap – sets the wrapping of text. Possible values:
• Soft – wraps the text bit does not send the carriage
return, Hard – wraps the text similar but sends the
carriage return, Off – no wrapping.
 Example of Text Area tag
A multi-line text field <textarea name="textarea"
cols="24" rows="2"> Hello </textarea>
Sample Codes #1
► Note:
 We are submitting the data to “submit.html”.
 If “post” is selected, the data being passed are
not visible to the address bar.

 If “get” is selected, the inputted information is

visible in the address bar.
Sample Codes #2
Write the Codes
20 Best Personal Websites in 2013

http://www.garylemasson.com/
20 Best Personal Websites in 2013

http://maribelaviles.com//
20 Best Personal Websites in 2013

http://julia.na/
20 Best Personal Websites in 2013

http://jimramsden.com/
20 Best Personal Websites in 2013

http://www.templatemonster.com/website-templates/10552.html
End of Presentation