Scribd
Upload
171 views23 pages

Processing Online Forms

HTML Lesson: Processing of Online Forms.. HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields.

Uploaded by

RJ Casildo
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
171 views23 pages

Processing Online Forms

HTML Lesson: Processing of Online Forms.. HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields.

Uploaded by

RJ Casildo
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 23

Processing Online Forms

Objectives
Define Online forms Know the use of online forms Discuss the content and input fields Appreciate the use of online forms by applying it to your project. Create an online form for comments and feedbacks

Online Forms

Online forms are Web pages purposely designed for gathering information of the internet.

The main use of online forms is to gather feedback or opinion from the users for data processing, usually through a database.

Content
To start building an online form, you should place inside the HTML body tags the <form> </form> tags. Then, you can organize it with the input empty tag. This is usually inside the <form> set of tags and its attribute type specifies the kind of input you are going to have. Another attribute, name, distinguishes one input field from another.

Input Fields

Types
Text fields Radio buttons Check boxes Text areas Select fields

Text fields

The primary information that you want to get from your Web page visitors would be their name and location.

Use text fields when you want the user to type letters or numbers in a form.

Text fields (continues)


<form> <input type=text name=firstname /> First Name <br /> <input type=text name=lastname /> Surname<br /> </form>
First Name
Surname

The web server will not know from which text field the input came from without the NAME attribute

Text fields (continues)

To control the visible size of the text field, we use the size attribute. If the size attribute is missing, the default value is usually set the by the browser to 20 which stands for 20em.

<form> <input type=text name=firstname /> First Name <br /> <input type=text name=lastname /> Surname<br /> <input type=text name=location size=15 /> City or Town<br/> </form>

Text fields (continues)

Another important attribute is maxlength. This sets the maximum number of characters that can be typed in the field. This attribute is helpful in cases where we have database length restrictions, or if we know the exact or maximum number of characters the user must provide.

Text fields (continues)


<form> <input type=text name=firstname /> First Name <br /> <input type=text name=lastname /> Surname<br /> <input type=text name=location size=15 /> City or Town<br/> <input type=text name=phone size=10 maxlength=11 /> Cellphone Number <br /> <input type=text name=email size=32 /> E-mail Address </form>
First Name Surname City or Town Cell Phone Number E-mail Address

Radio buttons
Radio buttons are used when you want the user to select only one option from a list. The type attribute here needs to be set to the value radio. Meanwhile, do not forget the name attribute because if you do, the user can only use one among the set of radio buttons in your page.

Radio buttons(continues)
The value attribute, which can be used to set a default value to the input text field, is also important. A radio button without a value becomes meaningless when submitted to the server because the server wont know what the button stands for.

Radio buttons(continues)
<p><b>What type of movie do you mostly prefer to watch?</b></p> <input type=radio name=movietype value=action /> Action

<input type=radio name=movietype value=comedy /> Comedy


<input type=radio name=movietype value=drama /> Drama <input type=radio name=movietype value=none /> None of these

To group a set of related radio buttons together, their name attribute should be one and the same.

Radio buttons(continues)

Note that only one option can be chosen. The checked attribute can be used to set the default selection if we want to indicate a pre-chosen selection.

<input type=radio name=movietype value=none checked/> None of these

Check boxes
Check boxes are similar to radio buttons, but are used when you want to let the user select more than one option among a number of choices. The type attribute is set to the value checkbox.

Check boxes(continues)
<p><b>Where do you watch movies? Select all that apply</b></p> <input type=checkbox name=cinema value=action /> Cinema

<input type=checkbox name=home value=comedy />Home


<input type=checkbox name=computer value=drama />Computer <input type=checkbox name=donotwatch value=none />Dont watch Adding checked attribute to one of these buttons will mark that button with a check when the page loads. <input type=checkbox name=donotwatch value=none checked/>Dont watch

Text Areas
Text areas are text fields that have more than one line for longer text input. Usually, they are used as a method to send comments or feedback. The tag changes to textarea

<textarea name=comments></textarea>

Text Areas (continues)

You can specify the dimensions of the textbox with the rows and cols attributes, which stand for the number of rows and columns.

<textarea name=comments rows=5 cols=35></textarea>

Text Areas (continues)

There is even the option to include default text to appear in the field when the page loads.

<textarea name=comments rows=5 cols=35>Please provide any additional comments.</textarea>

Select fields

Select field provides drop-down menus that the user can access to be able to choose any information from a given list.

<p><b>What is your age group?</b></p> <select name=age></select> The select tag must have a name attribute to identify the checkboxes.

Select fields(continuation)

The <option></option> tags define the text that is displayed in the menu.

<p><b>What is your age group?</b></p> <select name=age> <option value=teenager>younger than 20</option> <option value=youngperson>between 21 and 35</option> <option value=noanswer>prefer not to say</option> </select>

Select fields(continuation)

You may add selected to show which option will be displayed when the page loads. If not provided, the first item is selected by default.

<option selected>prefer not to say</option>

You might also like