HTML and CSS-Chapter 9 create a form

Source: Internet
Author: User
Tags website server

 

Chapter 9 create a form
Key points of this Chapter
Meanings and usage of common form tags
Meaning and usage of form layout Markup

Directory:
9.1 functions of forms
9.2 form tag
9.3 form layout tag

9.1 functions of forms
Form in HTML is the most common component in web pages, and is a website server and customer.
Communication between terminals. Forms are everywhere on the Internet. They are used to enter
Enter the username and password, and comment on the blog.

9.2 form tag
1. Form
You can use the <form> tag to define a form. After a form is defined, you can place the form tag in the form. The form uses <form> as the start tag and ends with </form>. Multiple forms are allowed in an HTML page, with the form name and ID as the distinction between them. The Form format code is as follows:
<Form tag attribute Settings>
Set various form tags
</Form>

2. Input
The most common form control is input. This type of form control is called an input control, which is marked by <input>. There are many types of input controls, which can be set through the type attribute. <Input> the tag can provide single-line text input boxes, single-choice buttons, check buttons, and common buttons for the form.

3. textarea
The HTML language provides an input box for multiple lines of text. This is the partition for receiving large amounts of data. It can be used for data input and for data display areas. To mark multiple lines of text as <textarea>, the syntax is:
<Textarea class = "Class Name" id = "ID name" Cols = "Number" rows = "Number" style = "style information" Read Only> display content in the detail area </ textarea>

4. Select and Option
HTML supports <SELECT>. The selection function makes it easier for you to select multiple options and improves the utilization of the window area. By setting the value of the <SELECT> label attribute size, different lists can be generated: The following lists are pulled and rolled. Set the attribute multiple to select multiple list items at the same time. <SELECT> A tag is a tag that defines a list structure. A list item (or a single item) in the list is a selected object and its definition must be marked with <option>. Therefore, to set a list, you must use both the <SELECT> and <option> tags.

<Select class = "Class Name" id = "ID name" name = "selectname" size = "Number" multiple>
Option flag
</SELECT>

5. optgroup
The <optgroup> label can be used to group options. The <optgroup> label can be used to classify options, and the label attribute is displayed as an optional indent title in the drop-down list. Syntax:

<Optgroup label = "group name">

9.3 form layout tag
1. fieldset and legend
<Fieldset> tags can be used to group related tags in a form. When a group of Form Controls are placed in the <fieldset> tag, the browser displays them in a special way. They may have special boundaries and 3D effects, you can even create a subform to process these tags.

<Legend> label as <fieldset> label definition title, <legend> and must be used in <fieldse> label.

2. Label
You can associate the text content in the form with a <label> tag and associate it with the form component using the for Attribute marked by <label>, the cursor is displayed in the associated form component. During use, you need to bind lable to other controls and set the for Attribute marked by <lable> to be the same as the ID of the control. Binding lable to the control's name attribute does not work. Syntax:

<Label for = "fname"> display content string </label>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.