HTML and FORMS HTML FORMS Forms A form

  • Slides: 23
Download presentation
HTML and FORMS HTML FORMS

HTML and FORMS HTML FORMS

Forms �A form is an area that can contain form elements. �Form elements are

Forms �A form is an area that can contain form elements. �Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc. ) in a form. �A form is defined with the <form> tag. <form>. input elements. </form>

Input Elements �The most used form tag is the <input> tag. The type of

Input Elements �The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are explained below. The elements are: Text Box Text Area Radio box Check box Drop Downs Button

Input Text Fields �Text fields are used when you want the user to type

Input Text Fields �Text fields are used when you want the user to type letters, numbers, etc. in a form. <form> First name: <input type="text" name="firstname" /> Last name: <input type="text" name="lastname" /> </form>

Input Radio Box �Radio Buttons are used when you want the user to select

Input Radio Box �Radio Buttons are used when you want the user to select one of a limited number of choices. <form> <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female </form>

Input Checkbox �Checkboxes are used when you want the user to select one or

Input Checkbox �Checkboxes are used when you want the user to select one or more options of a limited number of choices. <form> I have a bike: <input type="checkbox" name="vehicle" value="Bike" /> I have a car: <input type="checkbox" name="vehicle" value="Car" /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> </form>

Drop Down Menu <html> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option

Drop Down Menu <html> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html> Sample

Text area <html> <body> <form> <textarea rows="10" cols="30"> The cat was playing in the

Text area <html> <body> <form> <textarea rows="10" cols="30"> The cat was playing in the garden. </textarea> </form> </body> </html> Sample

Buttons <html> <body> <form action=""> <input type="button" value="Hello world!"> </form> </body> </html> Sample

Buttons <html> <body> <form action=""> <input type="button" value="Hello world!"> </form> </body> </html> Sample

Sending Information <html> <body> <form name="input" action="html_form_action. php" method="get"> Type your first name: <input

Sending Information <html> <body> <form name="input" action="html_form_action. php" method="get"> Type your first name: <input type="text" name="First. Name" value="Mickey" size="20"> Type your last name: <input type="text" name="Last. Name" value="Mouse" size="20"> <input type="submit" value="Submit"> </form> <p> If you click the "Submit" button, you will send your input to a new page called html_form_action. php. </p> </body> </html> Sample

Sending Information <html> <body> <form name="input" action="html_form_action. php" method="get"> Male: <input type="radio" name="Sex" value="Male"

Sending Information <html> <body> <form name="input" action="html_form_action. php" method="get"> Male: <input type="radio" name="Sex" value="Male" checked="checked"> Female: <input type="radio" name="Sex" value="Female"> <input type ="submit" value ="Submit"> </form> <p> If you click the "Submit" button, you will send your input to a new page called html_form_action. php. </p> </body> </html> Sample

So, how do we send information? Html_form. html <html> <body> <form name="input" action="html_form_action. php"

So, how do we send information? Html_form. html <html> <body> <form name="input" action="html_form_action. php" method="post"> message: <input type="text" name= "msg" > <input type ="submit" value ="Submit"> </form> </body> </html> source Html_form_action. php ? destination

So, how do we send information? Html_form. html <html> <body> <form name="input" action="html_form_action. php"

So, how do we send information? Html_form. html <html> <body> <form name="input" action="html_form_action. php" method="post"> message: <input type="text" name= "msg" > <input type ="submit" value ="Submit"> </form> </body> </html> source the button: waiting to be triggered

So, how do we send information? Html_form. html <html> <body> <form name="input" action="html_form_action. php"

So, how do we send information? Html_form. html <html> <body> <form name="input" action="html_form_action. php" method="post"> message: <input type="text" name= "msg" > <input type ="submit" value ="Submit"> </form> </body> </html> source If the submit button is clicked, I will send the content of this textbox (named msg) to a destination page.

So, how do we send information? Html_form. html <html> <body> <form name="input" action="html_form_action. php"

So, how do we send information? Html_form. html <html> <body> <form name="input" action="html_form_action. php" method="post"> message: <input type="text" name= "msg" > <input type ="submit" value ="Submit"> </form> </body> </html> source If the button is clicked, I will POST all of the contents of this form to this page.

So after I click the button, it goes to html_form_action. php… then what? Html_form.

So after I click the button, it goes to html_form_action. php… then what? Html_form. html <html> <body> <form name="input" action="html_form_action. php" method="post"> message: <input type="text" name= "msg" > <input type ="submit" value ="Submit"> </form> </body> </html> source Html_form_action. php ? destination

A catching mechanism � We need to CATCH the information… and PHP can help

A catching mechanism � We need to CATCH the information… and PHP can help to that!

Destination page: html_form_action. php <? php $input = $_POST[‘msg’]; echo “You said: <i>$input</i>”; ?

Destination page: html_form_action. php <? php $input = $_POST[‘msg’]; echo “You said: <i>$input</i>”; ? >

A source form and a destination form. Html_form. html <html> <body> <form name="input" action="html_form_action.

A source form and a destination form. Html_form. html <html> <body> <form name="input" action="html_form_action. php" method="post"> message: <input type="text" name= "msg" > <input type ="submit" value ="Submit"> </form> </body> </html> source Html_form_action. php <? php $input = $_POST[‘msg’]; echo “You said: <i>$input</i>”; ? > destination

A source form and a destination form. Html_form. html <html> <body> <form name="input" action="html_form_action.

A source form and a destination form. Html_form. html <html> <body> <form name="input" action="html_form_action. php" method="post"> message: <input type="text" name= "msg" > Html_form_action. php <? php $input = $_POST[‘msg’]; echo “You said: <i>$input</i>”; ? > <input type ="submit" value ="Submit"> html_form_action. php? msg=boo+to+you </form> </body> </html> source destination

End Notes for Source html �You can add many input elements within the form

End Notes for Source html �You can add many input elements within the form tag, however, the NAME of the input element MUST be unique. �In one html page, you can make many forms. Just be sure that the forms will not overlap from each other.

End Notes for Destination php �Be sure that the $_POST[whatever_the_name_of_the_form_element] is consistent from the

End Notes for Destination php �Be sure that the $_POST[whatever_the_name_of_the_form_element] is consistent from the form source. �Be sure that it is

Something to do during the Christmas break

Something to do during the Christmas break

HTML FORMS GETPOST METHODS HTML FORMS HTML FormsHTML FORMS GETPOST METHODS HTML FORMS HTML Forms
Web Design HTML FORM HTML Form Elemen HTMLWeb Design HTML FORM HTML Form Elemen HTML
Forms HTML 5 Webintegrator HTML Form form nameinputForms HTML 5 Webintegrator HTML Form form nameinput
Content HTML Forms HTML Form Elements HTML InputContent HTML Forms HTML Form Elements HTML Input
FORMS IN HTML Forms An HTML form providesFORMS IN HTML Forms An HTML form provides
2 2 HTML html HTML 5 html html2 2 HTML html HTML 5 html html
HTML HTML Tutorial HTML Basic HTML Advanced HTMLHTML HTML Tutorial HTML Basic HTML Advanced HTML
PHP Html Form Query string Html Form QuerystringPHP Html Form Query string Html Form Querystring
HTML Form HTML Form examples http 203 64HTML Form HTML Form examples http 203 64
Forms Forms Form 100 APS Sale Form 101Forms Forms Form 100 APS Sale Form 101
HTML HTML HTML 1 Begin Form 2 EndHTML HTML HTML 1 Begin Form 2 End
M1017556 HTML 5CSS 3 HTML M1029266 HTML formM1017556 HTML 5CSS 3 HTML M1029266 HTML form
HTML Programming Basic HTML Form 1 Forms ObjectHTML Programming Basic HTML Form 1 Forms Object
HTML Forms Internet Technology 1 HTML Form OverviewHTML Forms Internet Technology 1 HTML Form Overview
HTML Forms Internet Technology 1 HTML Form OverviewHTML Forms Internet Technology 1 HTML Form Overview
HTML Forms What are forms n n formHTML Forms What are forms n n form
HTML Forms What are forms n n formHTML Forms What are forms n n form
HTML Forms What are forms n n formHTML Forms What are forms n n form
HTML 5 HTML 5 DOCTYPE HTML html headHTML 5 HTML 5 DOCTYPE HTML html head
HTML 5 HTML 5 HTML 5 HTML 5HTML 5 HTML 5 HTML 5 HTML 5
HTML Tim BernersLeeCERNHTML HTML 11232020 HTML 1993 HTMLHTML Tim BernersLeeCERNHTML HTML 11232020 HTML 1993 HTML
HTML HTML Hypertext Markup Language HTML HTML indexHTML HTML Hypertext Markup Language HTML HTML index