![Page 1: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/1.jpg)
HTML Forms
a form is a container for input elements on a web page
input elements contain data that is sent to the web server for processing
![Page 2: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/2.jpg)
![Page 3: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/3.jpg)
<form action=”/cgi-bin/register_user” method=”post”>...</form>
action – cgi script to be executed on the server side method – POST or GET specifies how the input values are delivered to the cgi script
![Page 4: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/4.jpg)
Input controls
<input> - text, radio buttons, checkboxes, files, hidden, passwords
<button> - buttons <textarea> - multiline text <select> - drop down list
![Page 5: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/5.jpg)
<input type=”text”>
attributes: name – control name value – intial value size – initial display width (in characters) maxlength – maximum number of characters a user
may enter
![Page 6: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/6.jpg)
User Id:
<input type=”text” name=”userid” size=”10” maxlength=”8”>
![Page 7: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/7.jpg)
<input type=”password”>
attributes: same as for “text”
characters typed are rendered as *s secure only in the user agent
actual value sent in the clear over HTTP
![Page 8: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/8.jpg)
Password:
<input type=”password” name=”passwd” size=”10” maxlength=”8”>
![Page 9: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/9.jpg)
<input type=”hidden”>
like text except the field isn't rendered in the browser and the user can't interact with it
attributes: name – control name value – initial (and only value)
![Page 10: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/10.jpg)
<input type="hidden" name="secret" value="ssshhh!">
![Page 11: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/11.jpg)
<textarea>
creates a multi-line input text area attributes:
rows – the number of lines of input text cols – the width of the text area (in average character
widths) name – the name of the control
![Page 12: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/12.jpg)
Mail message: <br><textarea rows="5" cols="40" name="mmesg">This is the default value.</textarea>
![Page 13: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/13.jpg)
<input type=”radio”>
creates a radio button a mutually exclusive group is created by creating
several elements with the same name attribute attributes:
name – control name value – value associated with selected radio button checked – initial state of the button
![Page 14: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/14.jpg)
Eye color: <br><input type="radio" name="eye_c" value="brown"> Brown <br>
<input type="radio" name="eye_c" value="blue" checked="checked"> Blue <br>
<input type="radio" name="eye_c" value="green"> Green <br>
![Page 15: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/15.jpg)
<input type=”checkbox”>
creates a checkbox a non-exclusive group is created by creating
several elements with the same name attribute attributes:
name – control name value – value associated with selected checkbox checked – initial state of the checkbox
![Page 16: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/16.jpg)
Favourite Foods: <br>
<input type="checkbox" name="ffood" value="tofu"> Tofu <br>
<input type="checkbox" name="ffood" value="lentils"> Lentils <br>
<input type="checkbox" name="ffood" value="steak"> Steak <br>
![Page 17: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/17.jpg)
Lists
<select> element contianing one or more <option> elements
<select> attributes name – control name size – number of list items visible multiple – indicates multiple items can be selected
from the list
![Page 18: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/18.jpg)
<option> element
defines one option in a list attributes:
selected – indicates that the option is pre-selected value – initial value of the control (otherwise defaults
to the content of the element) label – alternate string to display rather than the
content of the element
![Page 19: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/19.jpg)
Menu items:<select name="menu" size="1"><option value="a">foo</option><option value="b">bar</option><option value="c">foobax</option><option value="d">blim</option></select>
![Page 20: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/20.jpg)
<input type=”file”>
allows an entire file to be submitted with a form attributes
name – control name value – intial file to use
![Page 21: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/21.jpg)
Image file:<input type="file" name="img_file" value="C:\boot.ini" size="10">
![Page 22: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/22.jpg)
Buttons
submit – causes the form to be submitted to the web server
reset – causes all input controls within the <form> to be restored to their initial buttons
other – behaviour defined by page author through client side scripting
![Page 23: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/23.jpg)
<input > style buttons
attributes: name: control name type: submit, reset, image, button
image creates a graphical submit button button creates a generic button
value: text to display on button control
![Page 24: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/24.jpg)
<input type="submit" value="Go!"><input type="reset" value="Ooops!"><br><input type="button" value="Do Something!"><br><input type="image" name="info" src="info.gif"><br>
![Page 25: HTML Forms a form is a container for input elements on a web page input elements contain data that is sent to the web server for processing](https://reader036.vdocument.in/reader036/viewer/2022062407/56649f495503460f94c6a7e3/html5/thumbnails/25.jpg)
HTML5 features
placeholder attribute date, time, email, url, color, etc. input types