1. Client-Side Internet and Web Programming
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

2. 5. FORMs in HTML
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 script
Web server: machine that processes browser requests.

3. 5. FORMs in HTML 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.

4. 5. FORMs in HTML The 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. 5. FORMs in HTML The 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

6. 5. FORMs in HTML Text Fields
<input type="text"> defines a one-line input field that a
user can enter text into:
<form> First name: <input type="text" name="fname" size="25">
<br> Last name: <input type="text" name="lname" size="25"> </form>
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. 

7. 5. FORMs in HTML Password Field
<input type="password"> defines a password field:
<form> Password: <input type="password" name="pswd"> </form>
How the HTML code above looks in a browser:
Note: The characters in a password field are masked
(shown as asterisks or circles). 

8. 5. FORMs in HTML Radio Buttons
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
<form> <input type="radio" name="gender" value="male">Male<br> <input type="radio" name="gender" value="female">Female </form>
How the HTML code above looks in a browser:

9. 5. FORMs in HTML Checkboxes
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

10. 5. FORMs in HTML Checkboxes
<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>
How the HTML code above looks in a browser:

11. 5. FORMs in HTML 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 usually does something with the received input.
VALUE attribute changes the text displayed on the button (default is “Submit”)
<form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"></form>
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

12. 5. FORMs in HTML Reset Button
<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”)
<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>
How the HTML code above looks in a browser:

13. 5. FORMs in HTML TEXTAREA Inserts a scrollable text box into FORM
ROWS and COLS attributes specify the number of
character rows and columns
<form name="input" action="html_form_action.asp" method="get"> <textarea rows="6" cols="36"> ITEC 229 </textarea>
</form>
How the HTML code above looks in a browser:

14. 5. FORMs in HTML 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

15. 5. FORMs in HTML SELECT How the HTML code above looks in a browser:
<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:

16. 5. FORMs in HTML EXAMPLE 1: <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 =
<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>

17. 5. FORMs in HTML EXAMPLE 1 (cont..) :
<P><STRONG> Address:</STRONG>
<INPUT NAME = " " 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>

18. 5. FORMs in HTML
EXAMPLE 1 (output):

19. 5. FORMs in HTML EXAMPLE 2: <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 =
<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> Address:</STRONG>
<INPUT NAME = " " TYPE = "password" SIZE = "25"></P>

20. 5. FORMs in HTML EXAMPLE 2 (cont..):
<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>

21. 5. FORMs in HTML EXAMPLE 2 (cont..):
<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>

22. 5. FORMs in HTML
EXAMPLE 2 (output):

23. Thank You ! END of CHAPTER 5 FORMs in HTML