1.02k likes | 1.03k Views
WHY FORMS?. FORM CONTROLS. HOW FORMS WORK. 1: User fills in form and presses button to submit info to server. HOW FORMS WORK. 2: Name of each form control sent with value user entered. HOW FORMS WORK. 3: Server processes information using programming language. HOW FORMS WORK.
E N D
HOW FORMS WORK 1: User fills in form and presses button to submit info to server
HOW FORMS WORK 2: Name of each form control sent with value user entered
HOW FORMS WORK 3: Server processes information using programming language
HOW FORMS WORK 4: Server creates new page to send back to the browser based on info received
NAME & VALUE PAIRS username=Ivy
NAME NAME & VALUE PAIRS username=Ivy
NAME VALUE NAME & VALUE PAIRS username=Ivy
FORM STRUCTURE <form action="http://example.com/join.php" method="get"> This is where the form controls will appear.</form>
FORM STRUCTURE <formaction="http://example.com/join.php" method="get"> This is where the form controls will appear.</form>
FORM STRUCTURE <form action="http://example.com/join.php"method="get"> This is where the form controls will appear.</form>
TEXT INPUT <form action="http://example.com/join.php"> <input type="text" name="username" size="15" maxlength="30" /></form>
TEXT INPUT <form action="http://example.com/join.php"> <input type="text" name="username" size="15" maxlength="30" /></form>
TEXT INPUT <form action="http://example.com/join.php"> <input type="text" name="username" size="15" maxlength="30" /></form>
TEXT INPUT <form action="http://example.com/join.php"> <input type="text" name="username"size="15" maxlength="30" /></form>
TEXT INPUT <form action="http://example.com/join.php"> <input type="text" name="username" size="15" maxlength="30" /></form>
PASSWORD <p>Username: <input type="text" name="username" size="15" maxlength="30" /></p><p>Password: <input type="password" name="password" size="15" maxlength="30" /></p>
PASSWORD <p>Username: <input type="text" name="username" size="15" maxlength="30" /></p><p>Password: <input type="password" name="password" size="15" maxlength="30" /></p>
TEXTAREA <p>What did you think of this gig?</p><textarea name="comments" cols="20" rows="4">Enter your comments...<textarea/>
TEXTAREA <p>What did you think of this gig?</p><textarea name="comments" cols="20" rows="4"> Enter your comments...<textarea/>
TEXTAREA <p>What did you think of this gig?</p><textarea name="comments"cols="20" rows="4"> Enter your comments...<textarea/>
TEXTAREA <p>What did you think of this gig?</p><textarea name="comments" cols="20" rows="4"> Enter your comments...<textarea/>
RADIO BUTTON <p>Your favorite genre:<br /> <input type="radio" name="genre" value="rock" checked="checked" /> Rock <input type="radio" name="genre" value="pop" /> Pop <input type="radio" name="genre" value="jazz" /> Jazz</p>
RADIO BUTTON <p>Your favorite genre:<br /> <input type="radio" name="genre" value="rock" checked="checked" /> Rock <input type="radio" name="genre" value="pop" /> Pop <input type="radio" name="genre" value="jazz" /> Jazz</p>
RADIO BUTTON <p>Your favorite genre:<br /> <input type="radio" name="genre" value="rock" checked="checked" /> Rock <input type="radio" name="genre" value="pop" /> Pop <input type="radio" name="genre" value="jazz" /> Jazz</p>
RADIO BUTTON <p>Your favorite genre:<br /> <input type="radio" name="genre"value="rock" checked="checked" /> Rock <input type="radio" name="genre"value="pop" /> Pop <input type="radio" name="genre"value="jazz" /> Jazz</p>
RADIO BUTTON <p>Your favorite genre:<br /> <input type="radio" name="genre" value="rock" checked="checked" /> Rock <input type="radio" name="genre" value="pop" /> Pop <input type="radio" name="genre" value="jazz" /> Jazz</p>
CHECKBOX <p>Your favorite music service:<br /> <input type="checkbox" name="service" value="iTunes" checked="checked" /> iTunes <input type="checkbox" name="service" value="Last.fm" /> Last.fm <input type="checkbox" name="service" value="Spotify" /> Spotify</p>
CHECKBOX <p>Your favorite music service:<br /> <input type="checkbox" name="service" value="iTunes" checked="checked" /> iTunes <input type="checkbox" name="service" value="Last.fm" /> Last.fm <input type="checkbox" name="service" value="Spotify" /> Spotify</p>
CHECKBOX <p>Your favorite music service:<br /> <input type="checkbox" name="service" value="iTunes" checked="checked" /> iTunes <input type="checkbox" name="service" value="Last.fm" /> Last.fm <input type="checkbox" name="service" value="Spotify" /> Spotify</p>
CHECKBOX <p>Your favorite music service:<br /> <input type="checkbox" name="service"value="iTunes" checked="checked" /> iTunes <input type="checkbox" name="service"value="Last.fm" /> Last.fm <input type="checkbox" name="service"value="Spotify" /> Spotify</p>
CHECKBOX <p>Your favorite music service:<br /> <input type="checkbox" name="service" value="iTunes"checked="checked" /> iTunes <input type="checkbox" name="service" value="Last.fm" /> Last.fm <input type="checkbox" name="service" value="Spotify" /> Spotify</p>
DROP DOWN LIST BOX <select name="devices"> <option value="iPod" selected="selected">iPod</option> <option value="radio">Radio</option> <option value="PC">Computer</option></select>
DROP DOWN LIST BOX <select name="devices"> <option value="iPod" selected="selected">iPod</option> <option value="radio">Radio</option> <option value="PC">Computer</option></select>
DROP DOWN LIST BOX <select name="devices"><option value="iPod" selected="selected">iPod</option> <option value="radio">Radio</option> <option value="PC">Computer</option></select>
DROP DOWN LIST BOX <select name="devices"> <option value="iPod" selected="selected">iPod</option> <option value="radio">Radio</option> <option value="PC">Computer</option></select>
DROP DOWN LIST BOX <select name="devices"> <option value="iPod" selected="selected">iPod</option> <option value="radio">Radio</option> <option value="PC">Computer</option></select>
DROP DOWN LIST BOX <select name="devices"> <option value="iPod"selected="selected">iPod</option> <option value="radio">Radio</option> <option value="PC">Computer</option></select>
MULTIPLE SELECT BOX <select name="devices" size="4"> <option value="guitar" selected="selected">Guitar</option> <option value="drums">Drums</option> <option value="keys" selected="selected">Keyboard</option> <option value="bass">Bass</option></select>
MULTIPLE SELECT BOX <select name="devices" size="4"> <option value="guitar" selected="selected">Guitar</option> <option value="drums">Drums</option> <option value="keys" selected="selected">Keyboard</option> <option value="bass">Bass</option></select>