Forms: Forms Are Used To Collect Data Inputted by A User. They Can Be Used As An
Forms: Forms Are Used To Collect Data Inputted by A User. They Can Be Used As An
Forms are used to collect data inputted by a user. They can be used as an
interface for a web application, for example, or to send data across the web.
form
form defines the form and within this tag, if you are using a form for a user to submit
information (which we are assuming at this level), an action attribute is needed to tell
the form where its contents will be sent to.
The method attribute tells the form how the data in it is going to be sent and it can have
the value get, which is default, and latches the form information onto a web address, or
post, which (essentially) invisibly sends the forms information.
get is used for shorter chunks of non-sensitive information - you might see the
information you have submitted in a web sites search to appear in the web address of its
search results page, for example. post is used for lengthier, more secure submissions,
such as in contact forms.
</form>
input
The input tag is the daddy of the form world. It can take a multitude of guises, the most
common of which are outlined below (see the input reference page for the whole crazy
family):
Note that, like img and br tags, the input tag, which doesnt surround any content,
doesnt require a closing tag.
textarea
textarea is, basically, a large, multi-line textbox. The anticipated number of rows and
columns can be defined with rows and cols attributes, although you can manipulate the
size to your hearts content using CSS.
select
The select tag works with the option tag to make drop-down select boxes.
<select>
<option>Option 1</option>
<option>Option 2</option>
<option value="third option">Option 3</option>
</select>
When the form is submitted, the value of the selected option will be sent. This value
will be the text between the selected opening and closing option tag unless an explicit
value is specified with the value attribute, in which case this will be sent instead. So, in
the above example, if the first item is selected, Option 1 will be sent, if the third item
is selected, third option will be sent.
Similar to the checked attribute of checkboxes and radio buttons, an option tag can
also have a selected attribute, to start off with one of the items already being selected,
eg. <option selected>Rodent</option> would pre-select Rodent from the items.
Names
All of the tags mentioned above will look very nice presented on the page but if you
hook up your form to a form-handling script, they will all be ignored. This is because
the form fields need names. So to all of the fields, the attribute name needs to be added,
for example <input type="text" name="talkingsponge">.
A contact form for Noahs Ark, for example, might look something like the one below.
(Note: this form will not work unless there is a contactus.php file, which is stated in
the action attribute of the form tag, to handle the submitted data).
<form action="contactus.php" method="post">
<p>Name:</p>
<p><input type="text" name="name" value="Your name"></p>
<p>Species:</p>
<p><input name="species"></p>
<!-- remember: 'type="text"' isn't actually necessary -->
<p>Comments: </p>
<p><textarea name="comments" rows="5" cols="20">Your
comments</textarea></p>
<p>Are you:</p>
<p><input type="radio" name="areyou" value="male"> Male</p>
<p><input type="radio" name="areyou" value="female"> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite"> An
hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual"> Asexual</p>
<p><input type="submit"></p>
</form>
EXEMPLOS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text and password inputs</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
fieldset {
padding: 0 1em 1em 1em;
}
legend {
padding: 1em;
}
</style>
</head>
<body>
<form action="someplace.php">
<fieldset>
<legend>Text and Password</legend>
<label for="username">Username:</label>
<input name="username" id="username" value="Some Text">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="Password">
</fieldset>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Checkbox and radio inputs</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
fieldset {
padding: 0 1em 1em 1em;
}
legend {
padding: 1em;
}
label {
float: left;
width: 6em;
}
</style>
</head>
<body>
<form action="someplace.php">
<fieldset>
<legend>Films you like</legend>
<div>
<label for="drama">Drama</label>
<input type="checkbox" name="drama" id="drama" value="drama">
</div>
<div>
<label for="action">Action</label>
<input type="checkbox" name="action" id="action" value="action">
</div>
<div>
<label for="comedy">Comedy</label>
<input type="checkbox" name="comedy" id="comedy" value="comedy">
</div>
<div>
<label for="horror">Horror</label>
<input type="checkbox" name="horror" id="horror" value="horror">
</div>
<div>
<label for="scifi">Sci-fi</label>
<input type="checkbox" name="scifi" id="scifi" value="scifi">
</div>
</fieldset>
<fieldset>
<legend>Your age</legend>
<div>
<label for="lt20">19 or under</label>
<input type="radio" name="age" id="lt20" value="lt20">
</div>
<div>
<label for="20to39">20 to 39</label>
<input type="radio" name="age" id="20to39" value="20to39">
</div>
<div>
<label for="40to59">40 to 59</label>
<input type="radio" name="age" id="40to59" value="40to59">
</div>
<div>
<label for="gt59">60 or over</label>
<input type="radio" name="age" id="gt59" value="gt59">
</div>
</fieldset>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>File inputs</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
fieldset {
padding: 0 1em 1em 1em;
}
legend {
padding: 1em;
}
</style>
</head>
<body>
<form action="someplace.php" method="post" enctype="multipart/form-
data">
<fieldset>
<legend>Upload file</legend>
<label for="uploadfile">File name: </label>
<input type="file" name="uploadfile" id="uploadfile">
</fieldset>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text areas</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
fieldset {
padding: 0 1em 1em 1em;
}
legend {
padding: 1em;
}
label {
float: left;
clear: left;
width: 7em;
}
</style>
</head>
<body>
<form action="someplace.php">
<fieldset>
<legend>Contact us</legend>
<div>
<label for="name">Name: </label>
<input name="name" id="name">
</div>
<div>
<label for="email">Email address: </label>
<input name="email" id="email">
</div>
<div>
<label for="message">Message: </label>
<textarea rows="10" cols="40" name="message" id="message"></textarea>
</div>
</fieldset>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Select menus</title>
<style>
body {
font: 100% arial, helvetica, sans-serif;
}
fieldset {
padding: 0 1em 1em 1em;
}
legend {
padding: 1em;
}
</style>
</head>
<body>
<form action="someplace.php">
<fieldset>
<legend>Favourite book</legend>
<label for="book">Name: </label>
<select name="book" id="book">
<option>The Trial</option>
<option>The Outsider</option>
<option>Things Fall Apart</option>
<option>Animal Farm</option>
</select>
</fieldset>
</form>
</body>
</html>
http://htmldog.com/guides/html/beginner/forms/