HTML Forms a form is a container for input elements on a web page input elements contain data that...
-
Upload
meagan-kennedy -
Category
Documents
-
view
222 -
download
0
Transcript of HTML Forms a form is a container for input elements on a web page input elements contain data that...
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
<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
Input controls
<input> - text, radio buttons, checkboxes, files, hidden, passwords
<button> - buttons <textarea> - multiline text <select> - drop down list
<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
User Id:
<input type=”text” name=”userid” size=”10” maxlength=”8”>
<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
Password:
<input type=”password” name=”passwd” size=”10” maxlength=”8”>
<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)
<input type="hidden" name="secret" value="ssshhh!">
<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
Mail message: <br><textarea rows="5" cols="40" name="mmesg">This is the default value.</textarea>
<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
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>
<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
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>
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
<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
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>
<input type=”file”>
allows an entire file to be submitted with a form attributes
name – control name value – intial file to use
Image file:<input type="file" name="img_file" value="C:\boot.ini" size="10">
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
<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
<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>
HTML5 features
placeholder attribute date, time, email, url, color, etc. input types