Common HTML tags and presentation (b)

form form tag is very important to a label when the front and rear end user interaction data, form the form is indispensable.

A, form form definition and usage

1. HTML tags for creating forms for user input.
2. The form can comprise input elements, such as text fields, check boxes, radio buttons, and so on submit button.
3. The form used for data transfer to the server.
NOTE: form element is a block element which produces longitudinal fold line.

用法：<form action="" method="" enctype="" autocomplete="">

Second, the commonly used form elements

[Label] input

Denotes an input block, there are a variety of forms, which may be determined according to the input frame display type attribute.

用法：<input name="" type="属性" >

input property	Explanation
text	Single-line text input, can be used to enter the account number
password	Password input box
radio	Single box
check	Checkbox
date	Date display
datetime	Time Display
button	Push button (used for binding events JS)
reset	Reset
submit	submit
textarea	Large text box can be used to write Introduction
select	Drop-down menu

Third, the commonly used form element usage

He stressed: input \ select \ textarea should have a name attribute

Element [text]

For establishing a single-line text input box

用法：
 <p>
        <label for="yhm">用户名：</label>
        <input id="yhm" name="username" type="text" readonly>
        <input name="username" type="text" placeholder="小强" disabled>
    </p>

[Password] elements

For establishing a password input box

<p>密码：
        <input name="password" type="password">
    </p>

[Elements] radio

For creating a single box

<p>性别：
        <input name="gender" type="radio" value="1">男
        <input name="gender" type="radio" value="0">女
        <input checked name="gender" type="radio" value="2">保密
    </p>

Note: where only equal name, can be radio, or multiple choice.

[Elements] checkbox

Used to create a checkbox

<p>爱好：
        <input name="bobby" type="checkbox" value="football">足球
        <input name="hobby" type="checkbox" value="doublecolorball">双色球
        <input name="hobby" type="checkbox" value="basketball">篮球
    </p>

[Properties] textarea

For creating large text box, generally used for writing Introduction

<p>
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </p>

Note: cols number of columns rows number of rows

[Select properties]

Used to create drop-down menu

<select name="form1" id="" multiple>
            <option value="sx">陕西</option>
            <option value="sc">四川</option>
        </select>

    <p>
        <select name="form2" id="">
            <optgroup label="北京">
                <option value="hd">海淀区</option>
                <option value="cy">朝阳区</option>
            </optgroup>
        </select>
    </p>

Note:
Readonly is read-only, i.e. only read the contents of the text box can not be modified
disabled to disable an input element, i.e. the element can not perform any operation input
value = "xxx" to set a default text box (actually exists )
placeholder = "XXX" is the default setting a gray (not a physical value)