Embed Size (px)
Citation preview
Forms
Form• An HTML form is a section of a document
containing normal content, special elements called controls (checkboxes, radio buttons, buttons, etc.), controls.
• When a form is submitted, all fields on the form are being sent.
• The <form> tag tells the browser where the form starts and ends with </form>.
• You can add all kinds of HTML tags between the <form> and </form> tags.
Controls• Controls• Users interact with forms through named
controls.• control "control name" is given by its name
attribute. • Each control has both an initial value and a
current value, both of which are character strings.
Control types• Text Fields• Password Field• Text Areas• Radio Buttons• Checkboxes• Selection List• Button• …….
Forms• Text Fields• Text fields are used when the user to type
letters, numbers, etc. in a form.• Eg:• First name: • <input type="text" name="firstname">• <br>• Last name: • <input type="text" name="lastname">
Forms• Password Field• <input type="password" /> defines a• eg
Password: <input type="password" name="pwd" />
Forms• Text Areas
Text areas are used for multiple-line text entry. • The default size of the text box is 1 row by 20
characters. • Change the size using the COLS and ROWS attributes.• example of a text area with a text box 40 characters
wide by 7 rows• <TEXTAREA NAME="myarea" COLS="40" ROWS="7">• </TEXTAREA>
Forms• Radio Buttons• Radio Buttons are used when user to select
one of a limited number of choices.• <input type="radio" name="sex"
value="male”> Male• <br>• <input type="radio" name="sex"
value="female"> Female
Forms• Checkboxes • Checkboxes are used when the user to select
one or more options of a limited number of choices.
• <input type="checkbox" name="vehicle1" value="Bike">I have a bike
• <br>• <input type="checkbox" name="vehicle2"
value="Car">I have a car:
Forms• The <select> tag is used to create a drop-
down list.• <select>
<option value=“popo">popo</option> <option value=“peepe">peepe</option> <option value=“monu">momu</option> <option value="akku">akku</option></select>
Forms• Button• To create a button• three types of buttons• submit buttons:• reset buttons:• push buttons:
Forms• Submit Button • submit buttons: When activated, a submit button submits a form.• A form may contain more than one submit button.• <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• <form name="input" action=“data.php" method="get">
Username: <input type="text" name="user" /><input type="submit" value="Submit" /></form>
Forms• Reset button• reset buttons: When activated, a reset
button resets all controls to their initial values.
• Used to reset all values in the form• <input type=reset>
Forms• push buttons: Push buttons have no default
behavior.• Each push button may have client-side scripts
associated with the element's event attributes.• When an event occurs (e.g., the user presses
the button, releases it, etc.), the associated script is triggered.
• <input type="button" name="bb" value="button">
Forms• HTML Forms• A form can contain input elements like text fields,
checkboxes, radio-buttons, submit buttons and more.
• The <form> tag is used to create an HTML form:• <form>
.input elements.</form>
Forms• action URL Specifies where to send the form-data
when a form is submitted• Method • get and post• Specifies the method to use when sending form-
data• name name Specifies the name of a form• get Adds the form-data to the URL in URL?
name=value&name=value • post Sends the form-data as an HTTP post
transaction
Forms• <html>• <head>• <title>popo</title>• </head>• <body bgcolor=black>• <center>• <table border=0 width=600>• <tr><td colspan=4 align=center><font size=16 color= white>Registration Form• <tr><td colspan=4 bgcolor=brown> • <tr><td align= right><font color=white size=3>First Name• <td><input type= text>• <tr><td align= right><font color=white size=3>Last Name• <td><input type= text>• <tr><td align= right><font color=white size=3>Address• <td><textarea cols=50 rows=5></textarea>• <tr><td align= right><font color=white size=3>Sex• <td><input type= radio name =s><font color=white size=3>Male<input type= radio name =s><font color=white
size=3>Female• <tr><td align= right rowspan=5><font color=white size=3>Hobby• <tr><td colspan=4><input type=checkbox> <font color=white size=3>Reading• <tr><td colspan=4><input type=checkbox> <font color=white size=3>Dancing• <tr><td colspan=4><input type=checkbox> <font color=white size=3>Sleeping• <tr><td colspan=4><input type=checkbox> <font color=white size=3>Watching TV• <tr><td align= right><font color=white size=3>State• <td><select>
Forms• <option value=“popo">popo</option>• <option value=“peepe">peepe</option>• <option value=“monu">momu</option>• <option value="akku">akku</option>• </select> • <tr><td align= right><font color=white size=3>District• <td><select>• <option value=“popo">popo</option>• <option value=“peepe">peepe</option>• <option value=“monu">momu</option>• <option value="akku">akku</option>• </select> • <tr><td align= right><font color=white size=3>User Name• <td><input type= text>• <tr><td align= right><font color=white size=3>Password• <td><input type=password>• <tr><td align= right><font color=white size=3>Confirm Password• <td><input type=password>• <tr><td><td align= center><input type=submit> <input type=reset>• <tr><td colspan=4 bgcolor=brown> • </table>• </center>• </body>• </html>
REDIRECT VIA SUBMIT• <FORM METHOD="GET"
ACTION="index.htm"• <INPUT TYPE="submit" Name="redirect"
VALUE="To Title Page">• </FORM>
SIMULATING BACK BUTTON• <FORM>• <INPUT TYPE="button" VALUE="Go Back"
onClick="history.back()">• </FORM>
Forms
