What is a Form?

▪ Form allows you to gather feedback from your readers or visitors and work on the data to provide better service.

▪ Online forms are webpages purposely designed for gathering information on the Internet. These HTML documents are sent back to
the server once the user submits them.

▪ The areas on the form are called fields, text fields or text boxes.

▪ The form also contains command buttons such as Send or Reset buttons. You can also see standard controls such as check buttons
or radio buttons and list boxes.

▪ To create a form, the container tag <form></form> must be used.

Forms present a variety of means for users to key in information:

• Textboxes • Dropdown menus

• Password boxes • Text areas

• Radio buttons • Submit buttons

• Check boxes • Reset or Clear buttons

Forms has two (2) attributes:

1. action 2. method

Action attribute

– is responsible for indicating where the information will be passed whether it is to another Web page or to a script.

Method attribute

– is responsible for indicating the way for sending the information.

The get method of sending information appends the data into the URL. More specifically, the get method is just basically for
retrieving data whereas the post method may update or store data.

Note: Using forms leads to effective communication between the user and the webmaster.

Attributes for <form></form>

Attribute

Name Definition Values

Action Indicates where the information will be submitted. Filename (path could be included), URL

Ex. <form action=“process.html”></form>

Method Indicates the method of submitting the information. post, get

Ex. <form action=“process.html” method=“post”></form>

Content

▪ The form should be both visually appealing and functional, which means that you may need to take care when choosing which key
points to include in a form.

▪ To start building an online form, the container tag <form></form> will be used. Start organizing the form by placing the input empty
tag inside the <form> set of tags and have its attribute type specify the kind of input you are going to have.

▪ Another attribute name, distinguishes one input field to another.

Input element

▪ The input element of form is defined by the empty tag <input> is used for making textboxes, password boxes, check boxes, radio
buttons, submit buttons and reset buttons depending on the value of the type attribute.

Values of the type attribute:

1.Text 2.Password 3.Checkbox

4.Radio 5.Submit 6.Reset

Note: A form also contains select lists, text areas and others.

Attributes for <input>

Attribute Name Definition Values

Name Assigns a name to the input field. The name can be used for various Any text (without spaces)

purposes and is required in most circumstances.

Ex. <input name=“textArea1”>

type Indicates the type of input field text, password, checkbox, radio, submit, reset

Ex. <input name=“textArea1” type=“text”>

Size Indicates the size of the input field. Any number

Ex. <input name=“textArea1” type=“text” size=“30”>

Value Indicates the initial value of the input field. Indicates the label for Any text

the submit and reset buttons

Ex. <input name=“textArea1” type=“text” value=“Input text here”>

Checked Indicates, if by default, the input field (radio button or check box) is None, needs no value. Just needs to be

selected present in the tag in order for it to provide its

effects.

Ex. <input name=“checkBox1” type=“checkbox” value=“Dog” checked>

New Input Types in HTML5 Attribute

Name Definition Example

color Selects color from a color picker <input type=“color” name=“favcolor”>

date Defines a date control <input type=“date” name=“bday”>

datetime Allows you to select a date and time. <input type=“datetime” name=“bdaytime”>

email Defines a field for an email address <input type=“email” name=“useremail”>

month Defines a month and year control <input type=“month” name=“bdaymonth”>

number Defines a numeric field <input type=“number” name=“qty” min=“1” max=“5>

range Defines control for entering a number <input type=“range” name=“points” min=“1” max=“10”>

whose exact value is not important.

search Defines a search field <input type=“search” name=“google”>

tel Defines a field for entering a telephone number <input type=“tel” name=“usertel”>

time Allows the user to select a time <input type=“time” name=“usertime”>

URL Used for input fields that should contain a URL address <input type=“url” name=“homepage”>

Other input types are “text”, “password”, “radio”, “checkbox”, “button”, “reset”, “submit”, “hidden”, “image” and “file”. Add
attributes like size, name and value.

Example: <input type=“password” size=“15” maxlength=“20” name=“password” value=“jemma”>

Creating a Textbox

▪ Textboxes are single line text input boxes.

▪ Textboxes are used for username input and other single line texts such as names, email addresses, etc.

▪ Can be made by keying in text as the value of the type attribute of the <input>.

Example: <input type=“text”>

Creating a Textbox

▪ You can use the value attribute to set an initial text input.

▪ The size attribute then indicates the length of the textbox.

Example: <h5>Name<input type=“text”></h5></form>

Creating a Large Text Area

▪ You can create an input field that can span several rows and columns to allow the readers to enter their feedback, requests,
instructions, opinions or any communication.

▪ Text areas are made via the container tag <texrtarea></textarea>.

▪ The content of this tag will be displayed in the text area by default.

Examples: <textarea name=“textarea1”> This is a textarea,></textarea>

<textarea name=“feedback” rows=“15” cols=“40”></textarea></p>

Creating a Large Text Area

Soft word wrapping – wraps the text only in the text area and not when it is submitted, can be made by keying in soft as the

value for the wrap attribute.

Hard word wrapping - wraps the text only in the text area and also when it is submitted, can be made by keying in hard as

the value for the wrap attribute.

Word wrapping can be removed by keying in off as the value for the wrap attribute.

Creating Radio Buttons

• Radio buttons provide the users a variety of choices where only one can be selected.

• Radio buttons can be made by keying in radio as the value of the type attribute of <input>

Example: <input type=“radio” name=“gender”>

• In a set of radio buttons, only one can be chosen; the name attribute is also used to indicate which set that radio

button belongs.

• Radio buttons of the same group have similar value for their name attributes
• The checked attribute is applicable for radio buttons to indicate a default selected option. Radio buttons are usually used when the
choices are few.

<p>Please check the products you have used in the past two years.<br></p>

<p><input name=“pictype” type=“radio” value=“cross”>Adobe Photoshop</p>

<p><input name=“pictype” type=“radio” value=“cross”>Microsoft Excel</p>

<p><input name=“pictype” type=“radio” value=“cross”>Norton Antivirus</p>

Creating Check Boxes

▪ Check boxes offer users a variety of choices where none, only one or many may be selected.

▪ Can be made by keying in checkbox as the value of the type attribute of <input>.

Example: <input type=“checkbox” name=“checkboxCS”>

The checked attribute is applicable for check boxes to indicate default selected options.

<input name=“pictype” type=“checkbox” value=“cross”>Adobe Photoshop

<input name=“pictype” type=“checkbox” value=“cross”>Microsoft Excel

<input name=“pictype” type=“checkbox” value=“cross”>Norton

Creating Drop-down Menus

▪ Like radio buttons, drop-down lists or drop-down menus offer users a variety of choices where only one can be selected.

▪ Drop-down menus are made via the container tag <select></select>.

▪ Individual items in drop-down menus are defined by the container tag <option></option>.

▪ The content tag will be the item in the menu.

Attributes for <select></select>

Attribute Name Definition Values

Name Assigns a name to the dropdown menu. The name can be used for any text(without spaces)

various purposes and is required in most circumstances

Ex. <select name=“dropdown1”></select>

size Indicates the number of visible items. Any number

Ex. <select name=“dropdown1” size=“4”</select>

Attributes for <option></option>

The selected attribute is used in dropdown menus to indicate a default selected option.

Attribute Name Definition Values

Value Assigns a name to the dropdown menu item. The name can be used any text(without spaces)

for various purposes and is required in most circumstances

Ex. <option value=“qc”>Quezon City</option> none

selected Indicates, if by default, the item is selected.

Ex. <option value=“qc” selected</option>

<select name=“contractchoice” size=“2”>

<option>January</option>

<option>February</option>

<option>March</option></select>

Creating an Email Feedback Form

▪ Feedback form allows communication with your website’s visitors. Visitors can submit questions and comments which will then be
forwarded to your email address.

Example: <form action=mailto:[email protected] method=“get” enctype=“text/plain”>

Elements of a Feedback Form

action=mailto:emailaddress Sends the form results to your email address

method=“get” Sends them as one request tothe mail program

enctype=“text/plain” Makes the results readable in your email address

Adding a Submit Button

▪ Usually placed at the end of forms and when clicked, submits the information input.

▪ It can be made by keying in submit as the value of the type attribute of <input>.

Example: <input type=“submit”>

Furthermore, the value of the value attribute indicates the label on the button.
Example: <p><input type=“submit” value=“Submit”>

Adding a Reset Button

▪ Reset or Clear button is usually placed at the end of a form.

▪ When it is clicked, it clears all the input information.

▪ This can be done by keying in reset as the value of the type attribute of <input>.

Example: <input type=“reset”>

• The value of the value attribute indicates the label on the button.

Adding a File

▪ File allows your website visitor to send files in your web server.

▪ File can be made by keying file as the value of the type attribute of <input> while the accept attribute specifies the types of files
that the server accepts (that can be submitted through a file upload).

Example: <input type=“file” name=“image” accept=“file_extension”>

Note: The accept attribute can only be used with <input type=“file”>

Optional Attribute for Accept

Value Definition

file_extension A file extension starting with the STOP character, ex. .gif, .jpg, .png, .doc

audio/* All sound files are accepted

video/* All video files are accepted

image/* All image files are accepted

media_type A valid media type, with no parameters

<input type=“file” name=“image” accept=“file_extension”>