Create HTML5 forms and HTML5 forms

Source: Internet
Author: User
Tags control label

Create HTML5 forms and HTML5 forms

I. Common form labels are as follows:

(1) "type" attribute in <input>:

Check box-checkbox; single-choice button-radio; button-button; submit-submit;

(2) text fields

Row-cols; column-rows;

  

<Form> Form
<Input> Input Field
<Textarea> Text Field
<Label> Control label
<Fieldset> Definition domain
<Legend> Domain Title
<Select> Select list
<Optgroup> Quota Group
<Option> Options in the drop-down list
<Button> Button

II. Application of common form tags

1. Create a user name and password form

(1) Main Code:

<Form>
Username: <input type = "text"/>
Password: <input type = "password"/>
<Br/>
</Form>

(2) effects:

 

2. Check box usage:

(1) Main Code:

<Form>
What fruits do you like? <Br/>
Apple <input type = "checkbox"/>
Tomato <input type = "checkbox"/>
Banana <input type = "checkbox"/>
Pineapple <input type = "checkbox"/>
</Form>

(2) effects:

 

3. Use of Single-choice buttons:

(1) Main Code:

<Form>

Select your gender:
Male <input type = "radio" name = "sex"/>
Female <input type = "radio" name = "sex"/>
</Form>

(2) effects:

 

4. Use of the drop-down list

(1) Main Code

<Form>

<Select>
<Option> www.baidu.com </option>
<Option> www.jikexueyuan.com </option>
<Option> www.google.com </option>
</Select>

</Form>

(2) Effects

 

5. Button usage

(1) Main Code

<Form>

<Input type = "button" value = "button"/> <br/> // "value" is used to define the value above the button.
<Input type = "submit"/> <br/>
<Input type = "reset"/> <br/> // "reset" is used to reset the content in the form.
</Form>

(2) Effects

<Textarea cols = "10" rows = "15"> Enter text here </textarea>

(2) Effects

 

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.