FORMs in HTML

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


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


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


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:



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



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


<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



<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”)



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”)



<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



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


5. FORMs in HTML

SELECT SELECT


<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>


5. FORMs in HTML

EEXAMPLE 1:XAMPLE 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 = "[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">


5. FORMs in HTML

EEXAMPLE 1 (cont..) :XAMPLE 1 (cont..) :


<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>


<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):


5. FORMs in HTML

EEXAMPLE 2:XAMPLE 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 = "[email protected]"><INPUT TYPE = "hidden" NAME = "subject" VALUE = "Feedback Form"><INPUT TYPE = "hidden" NAME = "redirect" VALUE = "main.html">


<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>Email Address:</STRONG><INPUT NAME = "email" TYPE = "password" SIZE = "25"></P>

5. FORMs in HTML

EEXAMPLE 2 (cont..):XAMPLE 2 (cont..):



<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>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..):


<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):


LOGOhttp://sct.emu.edu.tr/it/itec229http://sct.emu.edu.tr/it/itec229

FORMs in HTMLFORMs in HTML

END of CHAPTER 5

FORMs in HTML

Documents

Transcript of FORMs in HTML