Scribd
Upload
41 views

CoE 211 - HTML Part 2

HTML forms allow users to enter and submit information through interactive elements like text boxes, checkboxes, dropdown lists, and buttons. Forms are created using <form> tags which specify attributes like the submission address and method. Common input elements include textboxes, passwords, checkboxes, radio buttons, submit/reset buttons, and dropdown lists which are created using <input> tags specifying attributes like name, type, and value. Larger text areas can be created using <textarea> tags with attributes like name, rows, and columns. Form data can be submitted via GET which appends values to the URL or POST which hides values.

Uploaded by

Ackroid Paran
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
41 views

CoE 211 - HTML Part 2

HTML forms allow users to enter and submit information through interactive elements like text boxes, checkboxes, dropdown lists, and buttons. Forms are created using <form> tags which specify attributes like the submission address and method. Common input elements include textboxes, passwords, checkboxes, radio buttons, submit/reset buttons, and dropdown lists which are created using <input> tags specifying attributes like name, type, and value. Larger text areas can be created using <textarea> tags with attributes like name, rows, and columns. Form data can be submitted via GET which appends values to the URL or POST which hides values.

Uploaded by

Ackroid Paran
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

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

You might also like