Scribd
Upload
25 views4 pages

Form Elements

Uploaded by

Joseph Sadiwa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views4 pages

Form Elements

Uploaded by

Joseph Sadiwa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Lesson 16 CREATING HTML FORMS

What is form?
- bring together parts or combine to create (something).
- A form is a document with spaces in which to write or select, for a series of documents with similar
contents. The documents usually have the printed parts in common, except, possibly, for a serial
number.
- a printed or typed document with blank spaces for insertion of required or requested
information.. (Wikipedia)

What is the purpose of forms?


Forms are used to collect the required information in a logical, meaningful fashion for communication
and pass to another entity. When you picture what a form is, you can conjure many different types of
documents.

ADDING FORMS TO YOUR WEB PAGE


- Form allows the user to communicate with you through your website.
- Form allows the user to enter information and provides predefined choices from which the user can
select.
- Most forms include fields: text boxes, pull down menus that allow user input. The label explains what
information is needed by an adjacent field.

TWO SPECIAL BUTTONS


1. Submit button, when clicked, gathers all the information entered in the form and then sends them to
the URL specified in the action tag.
2. Reset button clears the from and return all the settings to their original default values
Syntax:
<input method = “post” Action=”URL”>
<input type = “submit” Value=”send”>
<input type = “reset” Value=”clear”>
Sample:
<FORM METHOD =”POST” Action = “URL”>
<Input Type= “Submit” Value =”send”
<input type =”reset” Value = “clear”>
CREATING INPUT TAG
- Most of the time, all input fields within a form are specified with the <input> tag and its different
attributes. There is no need to put a closing input tag.

1. Text Attribute
- Text is the default, with size used to specify the default size of the box that is created or how many
characters wide the text area will be. The default size is 20 characters.
Syntax:
<input text name=”label” size=”value of the size of the box”>
Sample:
<Body>
<Form>
Name: <Input type=”text” Text Name: “full name” size=”30”>
Age: <Input type=”number” Text Name: “age” size=”2” maxlength=”2”>

OUTPUT: in the text box name you can type up to 30 characters, in the textbox of age you can only type 2
number.
2. Using text area tag
- The <textarea> tag allows you to produce a box that can contain several lines of text.
- The TEXTAREA tag requires a unique name, specified with NAME=.
- You can specify the size of your text by using the ROWs and COLS attributes.
- It needs a closing tag for TEXT area.
Attribute Function
Rows determines the number of lines in the box
Cols Specifies the width of the lines
Sample:
<Body> <Form>
Name: <Input type=”text” Text Name: “full name” size=”30”>
Age: <Input type=”number” Text Name: “age” size=”2” maxlength=”2”>
<br> Describe yourself: <br>
<textarea name=”feedback” rows=”5” Cols=”60”> </textarea>

OUTPUT: Name text box can input up to 30 characters. Age text


box is up to 2 characters. In the describe yourself text box you can
type up to 60 characters in columns and 5 characters in rows. If the
5 rows are already occupied it automatically goes up but still you
can see 5 rows.

*textarea is a good way to allow the users to give their own views.
But as soon as the site becomes very busy, they might not have the
time to read all their messages. It would be better if you limit the
choices from a predefined list so that you can manage your site more
effectively.

3. Using Select tag


- Select tag creates a list field in which some choices are hidden.
- Start and end tags surround list options which are marked with <option>.
- The method to be used in order to limit your users choices is by using the <select> tag together with
<option> tag.
- It begins and ends with a select tag.

4. Using Option tag


- The option tag defines each individual choice that the user will see.
- An option tag does not need a closing tag.
- The option tag precedes each item in a list field; it must occur between <select> and </select> tags.
Attribute Function
Name Defines a name that will be paired with whatever value the user selects
Size Sets the number of items which will appear by default
Multiple Sets the number of options.
Value Specifies the text to be used to order-processing system if the current
option is selected
Selected Specifies the current option to appear in the field text box by default when the web page
opens in the browser.

<html>
What ice cream flavors would you like?
<select name=”Flavor”>
<option> Vanilla
<option> chocolate
<option selected> Peach
</select>
</html>
OUTPUT : this is a sample output of select tag and option tag. Select tag is used to select the
default option that will appear in the drop-down menu. Option tag is used to put words that will
serve as options in the drop-down list.

5. Password Tag
- This tag requires the user to enter password
- Maxlength attribute specifies the maximum number of characters a user may enter into the field.
Syntax:
<input type= “password” name=”password” size=”10” maxlength=”10”>
Sample:
<html>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd">
</html>

6. Creating check boxes


- Check boxes allow users to make multiple selections from a list.
- It displays an array of choices that are visible at one, and from which users may select any, all or none.
Option Function
Name Indicates the name that will be delivered to the web server.
Value You can use one check box with the same name, but with different values
Checked Turns on the item and automatically includes it in the list and displays a check mark by
default

Syntax:
<input type=”checkbox” name=”name” value=”value>

Sample:
<html>
<p>What is your Favorite food?
<br>
<input type="checkbox" name="food" value="salad"> salad
<br>
<input type="checkbox" name="food" value="meat"> sinigang
<br>
<input type="checkbox" name="food" value="fish"> anything but fish
</html>
OUTPUT:

7. Adding Radio Buttons


- To create a set of options that a user can see all at once, and from which a user can make only one
selection.
- These are small white circles, each shown next to the label.
- This option allows the user to choose only one.
Option Function
Type Sets a value to radio that identifies the from element
Name Assigns a name to the associated radio buttons, identifying them as a group
Value Specifies the text to be submitted to the order-processing system if the current
radio button is selected
Checked Marks the current radio button to appear in the browser as selected when the
page opens
Syntax: <input type=”radio” name=”name” Value=”value” Checked>

Sample:
<html>
What is your gender?
<br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="others">Other</label>
</html>

8. Inserting an image
- Instead of just merely using the text submit as your button you can be more creative by using
an image.
Syntax: <Input type=”image” src=”filename”>

You might also like