Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
8 views

html-form

The document explains the concept of forms, particularly HTML forms, which are used to collect user input on websites. It details the structure and components of forms, including various input types like text fields, checkboxes, radio buttons, and select menus, along with their syntax and usage. Additionally, it highlights the importance of forms in standardizing data collection and improving processing efficiency.

Uploaded by

Marc Alvin Diaz
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

html-form

The document explains the concept of forms, particularly HTML forms, which are used to collect user input on websites. It details the structure and components of forms, including various input types like text fields, checkboxes, radio buttons, and select menus, along with their syntax and usage. Additionally, it highlights the importance of forms in standardizing data collection and improving processing efficiency.

Uploaded by

Marc Alvin Diaz
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

What is form?

- a printed or typed document with blank spaces for insertion of required or requested information
(merriam webster)
- An HTML form is used to collect user input. The user input is most often sent to a server for
processing.
- An HTML form is a section of a document containing normal content, markup, special elements
called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls.
- A webform, web form or 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. For example, forms can be used to
enter shipping or credit card data to order a product, or can be used to retrieve search results from
a search engine.(Wikipedia)

Why do we use form?


- Forms have an awesome ability to standardize and
streamline data collection. By presenting questions or
fields in a consistent format, they ensure that
information is gathered systematically, making it
easier to process, analyze, and store. This doesn’t just
boost efficiency — it also reduces the likelihood of
errors that can occur with unstructured data
collection.

- A webform, web form or 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.
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