WEB FORUM
HTML Web Forms
HTML - Web Forms
HTML web forms are a composition of
buttons, checkboxes, and text input fields embedded inside of HTML documents
with one goal in mind: to capture user input. By doing things such as providing
fields for user data such as names, phone number, and email addresses, web
forms give users the opportunity to interact directly with a webpage.
HTML forms are placed on a web page using the <form> tag. This tag
should encapsulate a series of other form elements, identifying them as a
single cohesive web form.HTML Form Element:
<formg name="myWebForm" action="myServerSideScript.php" method="post">
<input type="checkbox" /> Checkbox 1<br />
<input type="text" /> Text Field 1<br />
<input type="submit" value="SUBMIT" />
</form>
HTML Web Form:
HTML form elements rely on action and method attributes to identify where to send the form data for processing (action) and how to process the data (method). In the code above, we've inserted some make-believe values to represent what a typical HTML form might look like behind the scenes.Unfortunately, HTML alone is unable to process form data. A scripting language such as PHP, PERL, and/or JavaScript must be used with HTML forms to process data captured by HTML form elements. A complete form-processing example using PHP can be found here: PHP Form Processing Example.
For the purpose of following along, we can also adjust the action property slightly to have the form launch an email client instead of processing a make-believe server-side script. This will provide us with some form interactivity for us as we learn more about HTML forms.
HTML Email Form Element:
<formg name="myWebForm" action="mailto:youremail@email.com" method="post">
<input type="checkbox" /> Checkbox 1<br />
<input type="text" /> Text Field 1<br />
<input type="submit" value="SUBMIT" />
</form>
HTML Email Form:
Now when the SUBMIT button is clicked, the user should see their default email client launch.HTML forms provide user interaction between visitors and the website while simultaneously collecting priceless user data from your users. They are a vital tool for any webmaster, and these days, it is common place to see form elements embedded in every web page.
HTML - Input Element(s)
HTML input elements are form elements such as text fields, checkboxes, and buttons. The name comes from the <input> tag, which is the mark-up that identifies web form components. The <input> tag relies upon a few attributes to classify and name each form item, providing the web developer with a means to manipulate each element individually.The type attribute determines what kind of input element to render to the screen. Options here include: text, checkbox, radio, button, submit, reset, password, and hidden form elements. Each has its own unique functionality and customizable presentation.
HTML Input Element Code:
<formg name="myWebForm" action="mailto:youremail@email.com" method="post">
Check Me: <input type="checkbox" /><br />
Name: <input type="text" /><br />
Yes: <input type="radio" /> No: <input type="radio" /><br />
<input type="submit" value="SUBMIT" />
<input type="reset" value="RESET" />
</form>
HTML Input Elements:
HTML - Web Forms: Value Attribute
The value attribute plays a different role depending on the type of the input field. For example, when used with an HTML button, the value attribute defines the text inside of the button. When used with a text field, the value attribute populates the field with a default value.HTML Input Element Code:
<formg name="myWebForm" action="mailto:youremail@email.com" method="post">
Check Me: <input type="checkbox" /><br />
Name: <input type="text" value="David" /><br />
Yes: <input type="radio" /> No: <input type="radio" /><br />
<input type="submit" value="Send" />
<input type="reset" value="Clear" />
</form>
HTML Input Elements:
HTML - Web Forms: Name and ID Attributes
Setting the name and id attributes inside of form elements is a good habit. The element name and/or id will later serve as the link between your HTML form and any server-side script that you may deploy later on to process that data. Perhaps the best approach is to use both attributes in your code, since varying scripting languages demand one identifying attribute over the other.HTML Input Element Code:
<formg name="myWebForm" action="mailto:youremail@email.com" method="post">
Check Me: <input name="" id="" type="checkbox" /><br />
Name: <input name="userName" id="userName" type="text" /><br />
Yes: <input name="radioItem" id="radioItem" type="radio" /> No: <input name="radioItem" id="radioItem" type="radio" /><br />
<input name="submitForm" id="submitForm" type="submit" value="SUBMIT" />
<input name="resetForm" id="resetForm" type="reset" value="RESET" />
</form>
HTML Input Elements:
HTML - Text Fields
Text fields offer a small rectangular box that's always ready to receive information from viewers. Users will notice that when they click these fields, the cursor will change from the typical arrow to a pipe character ( | ), allowing for text entries to be typed inside each input field.A text field is placed on a web page using the <input> tag, with the type attribute set with a value of "text".
HTML Text Field Code:
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
First: <input title="Please Enter Your First Name" id="first" name="first" type="text" /> Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" />
<input type="submit" value="SUBMIT" />
</form>
HTML Text Fields:
Text fields are designed to capture single words or phrases from the user. That information may then be processed through some kind of client/server side script (PHP, PERL, JavaScript). If you do plan on processing the data, be sure to include the name and id attributes. A descriptive title is also a great visual aid for providing a tool-tip display for your web elements.HTML - Text Fields: Size Attribute
To modify the visual presentation of a text field, one needs to pass an integer value to the size attribute. The value represents how many characters a text field can display within the text field window.As the web designer, it is your job to analyze and predict the average length of characters that will be entered into each field by your users. First and last names may generally vary from 8-24 characters in length, while a typical email address may range from 12-36 digits.
HTML Text Field Size:
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12" /><br />
Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" size="18" /><br />
<input type="submit" value="SUBMIT" />
</form>
HTML Text Field Size:
If the user happens to enter more digits than the size attribute value, these characters will not be discarded; it just means that the user will not be able to see all of their input at once. Instead, they will be forced to scroll to the beginning and end of the input element, which tends to discourage user interaction.HTML - Text Fields: Maxlength Attribute
Maxlength is an optional attribute that accepts an integer value. It allows the developer to restrict the number of characters a user can type in a specific text field.HTML Text Field Maxlength:
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12" maxlength="3" value="David" /><br />
Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" size="18" maxlength="3" value="Smith" /><br />
<input type="submit" value="SUBMIT" />
</form>
HTML Text Field Maxlength:
HTML - Password Fields: Attributes
Password form fields may be customized using the same attribute as outlined in the HTML Text Fields lesson.HTML Password Input Field Code:
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12" maxlength="12" /> Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" size="18" maxlength="24" /><br />
Password: <input type="password" title="Please Enter Your Password" size="8" maxlength="8" /><br />
<input type="submit" value="SUBMIT" />
</form>
HTML Password Input Fields:
Password fields offer a very thin layer of security by visually concealing passwords; they offer no security whatsoever against maintaining the integrity of the password data. From data is processed in plain text and can be readily sniffed by a hacker, unless HTTPS is used to encrypt the data.HTML - Reset Buttons
A reset button allows users to basically clear their web form. It wipes values from all fields by "resetting" the form to its default appearance.Set the type attribute of the <input> tag to "reset" to incorporate a reset button into a web form.
HTML Reset Button Code:
<input type="reset" value="Reset" />
<input type="reset" value="Start Over" />
Two HTML Reset Buttons:
HTML Code:
<form action="myphp.php" method="post"> <input type="text" size="12" maxlength="12" />
<input type="text" size="24" maxlength="24" />
<input type="reset" value="Reset" /> </form>
Reset Forms:
Fill out some information in the field boxes and press reset to experience a reset form!HTML - Submit Buttons
Submit buttons send form data to a back-end process or application. The back-end process then verifies and precesses the data, eventually passing the information into some database application.Set the type attribute of the <input> tag to "submit" in order to place a submit button on a web page.
HTML Submit Buttons:
<input type="submit" value="Submit" />
<br /> <input type="submit" value="Send" />
<br /> <input type="submit" value="Submit Form" /><br />
Three HTML Submit Buttons:
HTML - Form Submission - Action
Submission buttons send form data to whatever action has been designated by the action attribute of the encapsulating <form> element. We learned about the action attribute in our HTML Forms lesson.If you've been following along, we've also been using the deprecated mailto action to send form data to our default email client. This will allow us to get a sense of how form values are transferred to an action.
HTML Code:
<form method="post" action="mailto:youremail@youremail.com" >
First:<input type="text" name="First" size="12" maxlength="12" />
Last:<input type="text" name="Last" size="24" maxlength="24" />
<input type="submit" value="Send Email" />
</form>
Form Action:
Fill out the above form, and as your mail program opens, you can change the email address to a personal address and then send the results using the form.HTML - Checkbox Forms
Setting the type attribute of an <input> tag to checkbox places a checkbox element onto the web page.Deploy checkbox elements in a situation when the user must check all boxes that apply (or none). A scripting language such as PHP will easily handle this form element, returning all elements the user has checked (check out our PHP Form Example.)
HTML Checkbox Code:
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
<p>Please select every sport that you play.</p>
Soccer: <input type="checkbox" name="sports" value="soccer" /><br />
Football: <input type="checkbox" name="sports" value="football" /><br />
Baseball: <input type="checkbox" name="sports" value="baseball" /><br />
Basketball: <input type="checkbox" name="sports" value="basketball" />
</form>
HTML Checkbox Form:
Please select every sport that you play.
Soccer:
Football:
Baseball:
Basketball:
Checkboxes are used for instances where a user may wish to select multiple
options, such as in the instance of a "check all that apply"
question.Soccer:
Football:
Baseball:
Basketball:
HTML Checkboxes Selected
A checkbox element can be placed onto a web page in a pre-checked fashion by setting the checked attribute with a "yes" value. By doing so, this element will now default to a checked status each time the HTML page is loaded.HTML Checkbox Selected Code:
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
<p>Please select every sport that you play.</p> Soccer: <input type="checkbox" checked="yes" name="sports" value="soccer" /> <br /> Football: <input type="checkbox" name="sports" value="football" /> <br /> Baseball: <input type="checkbox" name="sports" value="baseball" /> <br /> Basketball: <input type="checkbox" checked="yes" name="sports" value="basketball" />
</form>
HTML Pre-Selected Checkboxes:
Please select every sport that you play.
Soccer:
Football:
Baseball:
Basketball:
Soccer:
Football:
Baseball:
Basketball:
HTML - Radio Forms
Radio form elements resemble the "Scan-Tron" sheets you may have used when you were in school to take a test. They basically allow the user to "bubble" in their choice and limit each question to only one selection per radio group.Place a radio element on to your web page by setting the type attribute of the <input> tag to "radio".
HTML Radio Input Code:
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
<h4>Please select your favorite food category.</h4>
<input type="radio" name="food" /> : Italian<br />
<input type="radio" name="food" /> : Greek<br />
<input type="radio" name="food" /> : Chinese<br />
</form>
HTML Radio Fields:
Please select your favorite food category.
: Italian
: Greek
: Chinese
By naming each field similarly with a type of cuisine, we have created a
relation, or a "grouping," of radio elements. This is how we link
each element together and assure that the user is able to select only one
answer.: Greek
: Chinese
Let's now take a look at how we can group together different sets of radio elements and simulate capturing two pieces of user data: gender and favorite food.
HTML Multiple Radios:
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
<h4>Please select your favorite food category.</h4>
<input type="radio" name="food" /> : Italian<br />
<input type="radio" name="food" /> : Greek<br />
<input type="radio" name="food" /> : Chinese<br />
<h4>Please select your gender.</h4>
<input type="radio" name="gender" /> : Male<br />
<input type="radio" name="gender" /> : Female<br />
Lt44/form>
HTML Multiple Radio Fields:
Please select your favorite food category.
: Italian
: Greek
: Chinese
: Greek
: Chinese
Please select your gender.
: Male
: Female
Words/values applied to the value attribute is the value or 'answer'
passed to any server-side script language we may have in place to record the
results.: Female
HTML - Radio: The Checked Attribute
By using the checked attribute, we adjust the form to load with a value already checked as the default setting.HTML Code:
<form name="myWebForm" action="mailto:youremail@email.com" method="post">
<h4>Please select your favorite food category.</h4>
<input type="radio" name="food" checked="yes" /> : Italian<br />
<input type="radio" name="food" /> : Greek<br />
<input type="radio" name="food" /> : Chinese<br />
</form>
Default Italian:
Using either/or logic, radios provide a very efficient way to capture very specific data from visitors. Remember to use radio elements only when you'd like the viewer to select only a single value, just as you might expect to see when taking a multiple-choice test in school.HTML - Select Fields
HTML select fields provide essentially the same functionality as HTML Checkbox Fields. They allow the user to select one or more values from a pre-determined series of options.Incorporating a select field into a web page is done using the <select> tag. List values are then added to the field using the <option> tag, similar to how list items <li> are added to ordered list elements (<ol>).
HTML Drop Down List:
<select name="selectionField">
<option value="CA" >California -- CA </option>
<option value="CO" >Colorado -- CO</option>
<option value="CN" >Connecticut -- CN</option>
</select>
HTML Drop Down List:
By default, select fields, popularly called drop down lists, only allow the user to choose a single value. This behavior and appearance may be changed by adjusting the multiple and size attributes as demonstrated below.HTML Selection Field Code:
<select size="3" name="selectionField" multiple="yes" >
<option value="CA" >California -- CA </option>
<option value="CO" >Colorado -- CO</option>
<option value="CN" >Connecticut -- CN</option>
</select>
HTML Selection Element:
With the above settings, the user is now able to select multiple values by pressing and holding the Control (ctrl) key and clicking each value.HTML - Disabling Selection Fields
Disabling a selection field is achieved by setting the disabled attribute to "yes". But before doing that, you should set at least one of the values to be selected. Doing so renders a read-only selection field on the page that can inform your users of their selections without allowing them to alter the selection.HTML Read-Only Selection Field:
<select size="3" name="selectionField" multiple="yes" disabled="yes">
<option value="CA" >California -- CA </option>
<option selected value="CO" >Colorado -- CO</option>
<option value="CN" >Connecticut -- CN</option>
</select>
HTML Read-Only Selections:
HTML - Hidden Field
Hidden fields allow a coder to pass values to form elements in a subtle manner. An experienced web developer will utilize these fields to pass temporary, or session-based data, from one form to another or to store information that has already been entered in by the user.
Place a hidden input field into your
web forms using the <input> tag and set the type attribute to
"hidden". This field can be customized using any of the attributes
discussed in the HTML Input and HTML Text Fields lessons.
HTML
Hidden Input Field:
<form
name="myWebForm" action="mailto:youremail@email.com"
method="post">
First:
<input title="Please Enter Your First Name" id="first"
name="first" type="text" size="12"
maxlength="12" /> Last: <input title="Please Enter Your
Last Name" id="last" name="last" type="text"
size="18" maxlength="24" /><br />
Password:
<input type="password" title="Please Enter Your
Password" size="8" maxlength="8" /><br
/><br />
<input
type="hidden" name="orderNumber" id="orderNumber"
value="0024" /><br />
<input
type="submit" value="SUBMIT" />
<input
type="reset" value="RESET" />
</form>
HTML
Hidden Fields:
First: Last:
Password:
Password:
It is important to note that HTML
hidden fields do not offer any data security. Like all HTML form elements, the
data is processed in plain text and is readily accessible by any novice hacker.
HTML - Upload Forms
Upload fields provide the interface that allows users to select a local file and upload it to the web server. An upload field renders as two parts -- an empty text field and a Browse button that opens up a local window explorer on the user's computer. This allows them to quickly browse to the local file and automatically fills in the file path inside of the text field.
Setting the type attribute of
the <input> to "file" places the upload element on a web page.
HTML
Upload Field Code:
<form
name="myWebForm" action="mailto:youremail@email.com"
method="post">
<input
type="file"
name="uploadField" />
</form>
HTML
Upload Field:
HTML - Max File Size Field
File transferring across the
internet is a complicated process and should include many layers of security.
HTML alone cannot ensure safe and secure file transferring, but it can offer a
first line of defense. Using a MAX_FILE_SIZE hidden field can limit the size of
files that are transferred.
Placing a restraint on an HTML
upload field is accomplished by using a hidden input field with the name
attribute set to MAX_FILE_SIZE.
HTML
MAX_FILE_SIZE Code:
<form
name="myWebForm" action="mailto:youremail@email.com"
method="post">
<input
type="hidden" name="MAX_FILE_SIZE" value="500"
/>
<input
type="file"
name="uploadField" />
</form>
HTML
MAX_FILE_SIZE:
The value attribute
specifies the maximum allowable kilobytes (KB) for any file selected by the
user.
HTML - Textareas
An HTML textarea is an oversized Text Field capable of capturing "blurb" type information from a user. If you've ever posted on a forum or left feedback on your favorite blog, you probably do so using an HTML textarea.
Embed textareas in HTML documents
using the <textarea> tag. Any text placed between the opening and closing
textarea tags will be rendered inside the textarea element as the
"default" text. This makes for a great way to give users an example
or description of how to go about filling out the text area field. Something
like, "Please limit your response to 100 characters," would be an
ideal description.
HTML
Textarea Code:
<textarea
name="myTextArea"cols="20"
rows="10">Please limit your response to 100
characters.</textarea><br />
<textarea
name="myTextArea" cols="40"
rows="2">Please limit your response to 200
characters.</textarea><br />
<textarea name="myTextArea" cols="45" rows="5">Please limit
your response to 500 characters.</textarea><br />
HTML
Textarea Form Element:
As you may have noticed, the
attributes cols (columns) and rows control the rendered size of
the textarea. These constraints only impact how the textarea is rendered
visually, and in no way do they limit the maximum number of characters a user
can place inside the textarea. In fact, if you fill up the fields above with
text, the fields will just continue to grow as you type and you will be able to
scroll up and down as you please. Limits must be set with JavaScript and/or a
server-side scripting language such as PHP.
HTML - Textarea Wrap
The wrap attribute refers to
how the user input reacts when it reaches the end of each row in the text
field. Wrapping can be defined using one of three values:
- soft
- hard
- off
"Soft" forces the words to
wrap once inside the textarea but once the form is submitted, the words will no
longer appear as such, and line breaks and spacing are not maintained.
"Hard" wraps the words inside
the text box and places line breaks at the end of each line so that when the
form is submitted the text will transfer as it appears in the field, including
line breaks and spacing.
"Off" sets a textarea to
ignore all wrapping and places the text into one ongoing line.
HTML
Text Area Word Wrap Code:
<textarea
cols="20" rows="5" wrap="hard">
As you can see many times word wrapping is
often the desired look for your textareas. Since it makes everything nice and
easy to read and preserves line breaks.
</textarea>
HTML
Text Area Word Wrap:
Here's a textarea with no word
wrapping at all!
HTML
Text Area No Word Wrap:
<textarea
cols="20" rows="5" wrap="off">
As
you can see many times word wrapping is often the desired look for your
textareas. Since it makes everything nice and easy to read. </textarea>
HTML
Text Area No Word Wrap:
HTML - Text Areas: Readonly
Setting a "yes" or
"no" value for the readonly attribute determines whether or
not a viewer has permission to manipulate the text inside the text field.
HTML
Readonly Attribute:
<textarea
cols="20" rows="5" wrap="hard" readonly="yes">
As
you can see many times word wrapping is often the desired look for your text
areas. Since it makes everything nice and easy to read.
</textarea>
HTML
Read Only Text Areas:
This read-only behavior allows a web
surfer to see and highlight the text inside the element, but he or she cannot
alter it in any way. When highlighted, the user may also Copy (Ctrl + C on a
PC, Ctrl-Click on a Mac) the text to local clipboard and paste it anywhere
he/she pleases.
HTML - Text Areas: Disabled
Disabling the textarea altogether
prevents the surfer from highlighting, copying, or modifying the field in any
way. To accomplish this, set the disabled property to "yes".
HTML
Code:
<textarea
cols="20" rows="5" wrap="hard" disabled="yes">
As
you can see many times word wrapping is often the desired look for your text
areas. Since it makes everything nice and easy to read.
</textarea>
</textarea>
Disabled
Textareas:
Keep in mind that just because users
are unable to copy from the screen directly doesn't prevent them from taking a
screen capture or extracting the data from the source code. Disabling the
textarea offers no security whatsoever.
