forms in html
DESCRIPTION
Eastern Mediterranean University School of Computing and Technology Department of Information Technology. ITEC229 Client-Side Internet and Web Programming. FORMs in HTML. CHAPTER 5. Prepared by: R. Kansoy. 5. FORMs in HTML. Used to c ollect information from people viewing your site - PowerPoint PPT PresentationTRANSCRIPT
LOGO
FORMs in HTMLFORMs in HTML
CHAPTER 5
Eastern Mediterranean UniversitySchool of Computing and TechnologyDepartment of Information Technology
ITEC229ITEC229Client-Side Internet and Web ProgrammingClient-Side Internet and Web Programming
Prepared by: R. Kansoy
5. FORMs in HTML
http://sct.emu.edu.tr/it/itec2292
Used to collect information from people viewing your site
The <FORM> </FORM> tag is used to create an HTML form.
FORM element Attributes
METHOD attribute indicates the way the Web server will organize and send you form output.
• METHOD = “post” in a form that causes changes to server data.• METHOD = “get” in a form that does not cause any changes in server data.
ACTION attribute
• Path to a scriptWeb server: machine that processes browser requests.Web server: machine that processes browser requests.
5. FORMs in HTML
http://sct.emu.edu.tr/it/itec2293
HTML forms are used to pass data to a server.
A 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.
5. FORMs in HTML
http://sct.emu.edu.tr/it/itec2294
The Input ElementThe Input Element
The most important form element is the input element.
An input element can vary in many ways, depending on the type attribute.
An input element can be of type text, checkbox, password, radio, submit, reset and more..
5. FORMs in HTML
http://sct.emu.edu.tr/it/itec2295
The Input ElementThe Input Element
INPUT element Attributes: TYPE (required)
– Defines the usage of the INPUT element– Hidden inputs always have TYPE = “hidden”
NAME provides a unique identification for INPUT element
VALUE indicates the value that the INPUT element sends to the server upon submission
SIZE– For TYPE = “text”, specifies the width of the text input, measured in characters
MAXLENGTH– For TYPE = “text”, specifies the maximum number of characters that the text input will accept
<form>First name: <input type="text" name="fname" size="25"><br>Last name: <input type="text" name="lname" size="25"></form>
<form>First name: <input type="text" name="fname" size="25"><br>Last name: <input type="text" name="lname" size="25"></form>
5. FORMs in HTML
Text FieldsText Fields
<input type="text"> defines a one-line input field that a
user can enter text into:
6 http://sct.emu.edu.tr/it/itec229
How the HTML code above looks in a browser:
Note: The form itself is not visible. Also note that the default width of a text field is 25 characters.
<form>Password: <input type="password" name="pswd"></form>
<form>Password: <input type="password" name="pswd"></form>
5. FORMs in HTML
PasswordPassword Field Field
<input type="password"> defines a password field:
7 http://sct.emu.edu.tr/it/itec229
How the HTML code above looks in a browser:
Note: The characters in a password field are masked (shown as asterisks or circles).
<form><input type="radio" name="gender" value="male">Male<br><input type="radio" name="gender" value="female">Female</form>
<form><input type="radio" name="gender" value="male">Male<br><input type="radio" name="gender" value="female">Female</form>
5. FORMs in HTML
Radio Radio BButtonsuttons
Radio buttons let a user select ONLY ONE of a limited number of choices.
<input type="radio"> defines a radio button.
CHECKED attribute indicates which radio button is selected initially
8 http://sct.emu.edu.tr/it/itec229
How the HTML code above looks in a browser:
5. FORMs in HTML
CheckboxesCheckboxes
Checkboxes let a user select NONE/ONE/MORE options of a limited number of choices.
<input type="checkbox"> defines a checkbox.
Used individually or in groups
Each checkbox in a group should have same NAME
Make sure that the checkboxes within a group have
different VALUE attribute values
• Otherwise, browser will cannot distinguish between them
CHECKED attribute checks boxes initially
9 http://sct.emu.edu.tr/it/itec229
<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>
<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>
5. FORMs in HTML
CheckboxesCheckboxes
10 http://sct.emu.edu.tr/it/itec229
How the HTML code above looks in a browser:
<form name="input" action="html_form_action.asp" method="get">Username: <input type="text" name="user"><input type="submit" value="Submit"></form>
<form name="input" action="html_form_action.asp" method="get">Username: <input type="text" name="user"><input type="submit" value="Submit"></form>
5. FORMs in HTML
Submit ButtonSubmit 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 usually does something with the received input.VALUE attribute changes the text displayed on the button (default is “Submit”)
11 http://sct.emu.edu.tr/it/itec229
How the HTML code above looks in a browser:
NOTE: If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input
<form name="input" action="html_form_action.asp" method="get"><P>Username: <input type="text" name="user" size="25"></P><P>Password: <input type="password" name="pswd" size="25"></P><P><input type="submit" value="Submit"><input type="reset" value="Reset"></P></form>
<form name="input" action="html_form_action.asp" method="get"><P>Username: <input type="text" name="user" size="25"></P><P>Password: <input type="password" name="pswd" size="25"></P><P><input type="submit" value="Submit"><input type="reset" value="Reset"></P></form>
5. FORMs in HTML
Reset Reset ButtonButton
<input type= "reset" > defines a reset button.A reset button is used to clear all the entries user entered into the form.VALUE attribute changes the text displayed on the button (default is “Reset”)
12 http://sct.emu.edu.tr/it/itec229
How the HTML code above looks in a browser:
<form name="input" action="html_form_action.asp" method="get"><textarea rows="6" cols="36"> ITEC 229 </textarea> </form>
<form name="input" action="html_form_action.asp" method="get"><textarea rows="6" cols="36"> ITEC 229 </textarea> </form>
5. FORMs in HTML
TEXTAREATEXTAREA
Inserts a scrollable text box into FORM
ROWS and COLS attributes specify the number of character rows and columns
13 http://sct.emu.edu.tr/it/itec229
How the HTML code above looks in a browser:
5. FORMs in HTML
SELECT SELECT
Places a selectable list of items inside FORM Include NAME attribute
Add an item to list Insert an OPTION element in the
<SELECT>…</SELECT>tags Closing OPTION tag optional
SELECTED attribute applies a default selection to list
Change the number of list options visible Including the SIZE = “x” attribute inside the <SELECT> tag x number of options visible
14 http://sct.emu.edu.tr/it/itec229
5. FORMs in HTML
SELECT SELECT
15 http://sct.emu.edu.tr/it/itec229
<form action=""><select name="cars"><option selected>BMW</option><option>Mercedes</option><option>Audi</option></select></form>
<form action=""><select name="cars"><option selected>BMW</option><option>Mercedes</option><option>Audi</option></select></form>
How the HTML code above looks in a browser:
5. FORMs in HTML
EEXAMPLE 1:XAMPLE 1:
16 http://sct.emu.edu.tr/it/itec229
<HTML><HEAD><TITLE> Forms</TITLE></HEAD>
<BODY><H2>Feedback Form</H2>
<P>Please fill out this form to help us improve our site.</P>
<FORM METHOD = "POST" ACTION = "/cgi-bin/formmail">
<INPUT TYPE = "hidden" NAME = "recipient" VALUE = "[email protected]"><INPUT TYPE = "hidden" NAME = "subject" VALUE = "Feedback Form"><INPUT TYPE = "hidden" NAME = "redirect" VALUE = "main.html">
<P><STRONG>Name: </STRONG><INPUT NAME = "name" TYPE = "text" SIZE = "25"></P><P><STRONG>Comments:</STRONG><TEXTAREA NAME = "comments" ROWS = "4" COLS = "36"></TEXTAREA></P>
<HTML><HEAD><TITLE> Forms</TITLE></HEAD>
<BODY><H2>Feedback Form</H2>
<P>Please fill out this form to help us improve our site.</P>
<FORM METHOD = "POST" ACTION = "/cgi-bin/formmail">
<INPUT TYPE = "hidden" NAME = "recipient" VALUE = "[email protected]"><INPUT TYPE = "hidden" NAME = "subject" VALUE = "Feedback Form"><INPUT TYPE = "hidden" NAME = "redirect" VALUE = "main.html">
<P><STRONG>Name: </STRONG><INPUT NAME = "name" TYPE = "text" SIZE = "25"></P><P><STRONG>Comments:</STRONG><TEXTAREA NAME = "comments" ROWS = "4" COLS = "36"></TEXTAREA></P>
5. FORMs in HTML
EEXAMPLE 1 (cont..) :XAMPLE 1 (cont..) :
17 http://sct.emu.edu.tr/it/itec229
<P><STRONG>Email Address:</STRONG><INPUT NAME = "email" TYPE = "text" SIZE = "25"></P>
<P><STRONG>Things you liked:</STRONG><BR>Site design <INPUT NAME="things" TYPE="checkbox" VALUE="Design">Links <INPUT NAME="things" TYPE="checkbox" VALUE="Links">Ease of use <INPUT NAME="things" TYPE="checkbox" VALUE="Ease">Images <INPUT NAME="things" TYPE="checkbox" VALUE="Images">Source code <INPUT NAME="things" TYPE="checkbox" VALUE="Code"></P>
<INPUT TYPE="submit" VALUE="Submit Your Entries"><INPUT TYPE="reset" VALUE="Clear Your Entries">
</FORM></BODY></HTML>
<P><STRONG>Email Address:</STRONG><INPUT NAME = "email" TYPE = "text" SIZE = "25"></P>
<P><STRONG>Things you liked:</STRONG><BR>Site design <INPUT NAME="things" TYPE="checkbox" VALUE="Design">Links <INPUT NAME="things" TYPE="checkbox" VALUE="Links">Ease of use <INPUT NAME="things" TYPE="checkbox" VALUE="Ease">Images <INPUT NAME="things" TYPE="checkbox" VALUE="Images">Source code <INPUT NAME="things" TYPE="checkbox" VALUE="Code"></P>
<INPUT TYPE="submit" VALUE="Submit Your Entries"><INPUT TYPE="reset" VALUE="Clear Your Entries">
</FORM></BODY></HTML>
5. FORMs in HTML
EEXAMPLE 1 (output):XAMPLE 1 (output):
18 http://sct.emu.edu.tr/it/itec229
5. FORMs in HTML
EEXAMPLE 2:XAMPLE 2:
19 http://sct.emu.edu.tr/it/itec229
<HTML><HEAD><TITLE> Forms II</TITLE></HEAD>
<BODY><H2>Feedback Form</H2><P>Please fill out this form to help us improve our site.</P>
<FORM METHOD = "POST" ACTION = "/cgi-bin/formmail"><INPUT TYPE = "hidden" NAME = "recipient" VALUE = "[email protected]"><INPUT TYPE = "hidden" NAME = "subject" VALUE = "Feedback Form"><INPUT TYPE = "hidden" NAME = "redirect" VALUE = "main.html">
<P><STRONG>Name: </STRONG><INPUT NAME = "name" TYPE = "text" SIZE = "25"></P><P><STRONG>Comments:</STRONG><TEXTAREA NAME = "comments" ROWS = "4" COLS = "36"></TEXTAREA></P>
<P><STRONG>Email Address:</STRONG><INPUT NAME = "email" TYPE = "password" SIZE = "25"></P>
<HTML><HEAD><TITLE> Forms II</TITLE></HEAD>
<BODY><H2>Feedback Form</H2><P>Please fill out this form to help us improve our site.</P>
<FORM METHOD = "POST" ACTION = "/cgi-bin/formmail"><INPUT TYPE = "hidden" NAME = "recipient" VALUE = "[email protected]"><INPUT TYPE = "hidden" NAME = "subject" VALUE = "Feedback Form"><INPUT TYPE = "hidden" NAME = "redirect" VALUE = "main.html">
<P><STRONG>Name: </STRONG><INPUT NAME = "name" TYPE = "text" SIZE = "25"></P><P><STRONG>Comments:</STRONG><TEXTAREA NAME = "comments" ROWS = "4" COLS = "36"></TEXTAREA></P>
<P><STRONG>Email Address:</STRONG><INPUT NAME = "email" TYPE = "password" SIZE = "25"></P>
5. FORMs in HTML
EEXAMPLE 2 (cont..):XAMPLE 2 (cont..):
20 http://sct.emu.edu.tr/it/itec229
<P><STRONG>Things you liked:</STRONG><BR>Site design <INPUT NAME="things" TYPE="checkbox" VALUE="Design">Links <INPUT NAME="things" TYPE="checkbox" VALUE="Links">Ease of use <INPUT NAME="things" TYPE="checkbox" VALUE="Ease">Images <INPUT NAME="things" TYPE="checkbox" VALUE="Images">Source code <INPUT NAME="things" TYPE="checkbox" VALUE="Code"></P>
<P><STRONG>How did you get to our site?:</STRONG><BR>Search engine<INPUT NAME="how get to site" TYPE="radio" VALUE="search engine" CHECKED>Links from another site<INPUT NAME="how get to site" TYPE="radio" VALUE="link">Deitel.com Web site<INPUT NAME="how get to site" TYPE="radio" VALUE="deitel.com">Reference in a book<INPUT NAME="how get to site" TYPE="radio" VALUE="book">Other<INPUT NAME="how get to site" TYPE="radio" VALUE="other"></P>
<P><STRONG>Things you liked:</STRONG><BR>Site design <INPUT NAME="things" TYPE="checkbox" VALUE="Design">Links <INPUT NAME="things" TYPE="checkbox" VALUE="Links">Ease of use <INPUT NAME="things" TYPE="checkbox" VALUE="Ease">Images <INPUT NAME="things" TYPE="checkbox" VALUE="Images">Source code <INPUT NAME="things" TYPE="checkbox" VALUE="Code"></P>
<P><STRONG>How did you get to our site?:</STRONG><BR>Search engine<INPUT NAME="how get to site" TYPE="radio" VALUE="search engine" CHECKED>Links from another site<INPUT NAME="how get to site" TYPE="radio" VALUE="link">Deitel.com Web site<INPUT NAME="how get to site" TYPE="radio" VALUE="deitel.com">Reference in a book<INPUT NAME="how get to site" TYPE="radio" VALUE="book">Other<INPUT NAME="how get to site" TYPE="radio" VALUE="other"></P>
5. FORMs in HTML
EEXAMPLE 2 (cont..):XAMPLE 2 (cont..):
21 http://sct.emu.edu.tr/it/itec229
<P><STRONG>Rate our site (1-10):</STRONG><SELECT NAME = "rating"><OPTION SELECTED>Amazing:-)<OPTION>10<OPTION>9<OPTION>8<OPTION>7<OPTION>6<OPTION>5<OPTION>4<OPTION>3<OPTION>2<OPTION>1<OPTION>The Pits:-(</SELECT></P>
<INPUT TYPE = "submit" VALUE = "Submit Your Entries"><INPUT TYPE = "reset" VALUE = "Clear Your Entries"></FORM></BODY></HTML>
<P><STRONG>Rate our site (1-10):</STRONG><SELECT NAME = "rating"><OPTION SELECTED>Amazing:-)<OPTION>10<OPTION>9<OPTION>8<OPTION>7<OPTION>6<OPTION>5<OPTION>4<OPTION>3<OPTION>2<OPTION>1<OPTION>The Pits:-(</SELECT></P>
<INPUT TYPE = "submit" VALUE = "Submit Your Entries"><INPUT TYPE = "reset" VALUE = "Clear Your Entries"></FORM></BODY></HTML>
5. FORMs in HTML
EEXAMPLE 2 (output):XAMPLE 2 (output):
22 http://sct.emu.edu.tr/it/itec229
LOGOhttp://sct.emu.edu.tr/it/itec229http://sct.emu.edu.tr/it/itec229
FORMs in HTMLFORMs in HTML
END of CHAPTER 5