Forms and their attributes
<form>
All the form elements are placed between this tag
action=”url” – The action attribute points to the URL where the forms information will be submitted<
method=”get” or method=”post”- Forms are sent using either the get or post
Values from the form will be added to the URL specified in the ACTION attribute
GET is used in the following form situations:
– Short forms like search
– When only retrieving data from the server
POST method sends the values as HTTP headers and are used for the following forms:
– Upload forms
– Very long forms
– Forms which contain sensitive data
– When adding or deleting information from a database
If no method is set (POST or GET) the form will default to using the GET method
The <input> element is used to create several types of form controls, the value of the type= attribute will determine what kind is created.
Other form elements and attributes include:
– type=”text” – creates a single line output
– name=” ” – identifies the form control for the server
– mexlength=” ” – used to limit the number of characters on a form
– type=”password” – single line text that blocks the input
– element creates a multiline form, text that is coded between the opening and closing tags will appear in the form box
– type=”radio” – creates radio buttons of which only one can be selected
– value=” ” – indicates the value sent to the server of the selected button
– <selected> – this attribute can be used to have a button selected when the page loads
– type=”checkbox” – allows selection of one or more options
– <select> – creates a drop down list
<option> – used with the select element to create options the user can choose
– size=” ” can be used with select to set how many drop down options can be seen
– <multiple=”multiple”> – allows users the pick more than one drop down option
<input> – element is used to allow file uploads
– type=”file” – creates an upload form, method must be set as POST
– type=”submit” – creates a submit button
– type=”image” – can be used to create an image submit button
– type=”hidden” – hides a form on the page
– <button> – element allows more control over button appearance, combine text and image between opening and closing tags
– <label> – identifies the form and helpful for screen readers
– for=” ” – used alongside LABEL and identifies which form it belongs to and allows users to click text
<fieldset> – use to group related forms, browser will show line around group
<legend> – id’s the form group and appears as a form header
– type=”date” – creates a date selection box
– type=”email” – use for email form and also optimizes for smartphone keyboard
– type=”URL” – used when asking for a URL and HTML5 will validate a url as input
– type=”search” – creates a single line search form
– placeholder=” ” – text written in the placeholder attribute shows up in the text form
<html>
<head>
<title>Forms</title>
</head>
<body>
<form action="http://www.example.com/review.php" method="get">
<fieldset>
<legend>
Your Details:
</legend>
<label>
Name:
<input type="text" name="name" size="30" maxlength="100">
</label>
<br />
<label>
Email:
<input type="email" name="email" size="30" maxlength="100">
</label>
<br />
</fieldset>
<br />
<fieldset>
<legend>
Your Review:
</legend>
<p>
<label for="hear-about">
How did you hear about us?
</label>
<select name="referrer" id="hear-about">
<option value="google">Google</option>
<option value="friend">Friend</option>
<option value="advert">Advert</option>
<option value="other">Other</option>
</select>
</p>
<p>
Would you visit again?
<br />
<label>
<input type="radio" name="rating" value="yes" />
Yes
</label>
<label>
<input type="radio" name="rating" value="no" />
No
</label>
<label>
<input type="radio" name="rating" value="maybe" />
Maybe
</label>
</p>
<p>
<label for="comments">
Comments:
</label>
<br />
<textarea rows="4" cols="40" id="comments">
</textarea>
</p>
<label>
<input type="checkbox" name="subscribe" checked="checked" />
Sign me up for email updates
</label>
<br />
<input type="submit" value="Submit review" />
</fieldset>
</form>
</body>
</html>
Posted by Josh Gahan 