HTML (lower)

HTML (lower)

form form

Form Function

Interaction data for transfer to the server, enabling the web server

It includes input series label, eg: text fields, check boxes, radio buttons, submit buttons, etc.

May also contain textarea, select, fieldset and label lable

Form Properties

Attributes	description
accept-charset	Character set used in the prescribed form is submitted (default: page character set)
action	Address (URL) where to submit the form prescribed submission page
autocomplete	The provisions of the browser should automatically complete a form (default: ON)
enctype	Submitted predetermined encoded data (default: url-encoded)
method	Regulations when submitting forms use HTTP method (default: GET)
name	Specifies the name recognition of the form
novalidate	Provisions browser does not validate the form
target	Address the objectives set out in the action attribute (default: _self)

<input>Enter a label (text box) (inline tag)

<input>Based on the different elements type, attributes, alternatives for a variety of forms.

You need to take a look at the top of this piece of code that you can read to understand it, inside the property and whether you understand, do not understand it right, you can look for these attributes in the end is doing in property values ​​below.

  <form>
        姓名：<input value="呵呵" >逗比<br>
        昵称：<input value="哈哈" readonly=""><br>
        名字：<input type="text" value="name" disabled=""><br>
        密码：<input type="password" value="pwd" size="50"><br>
        性别：<input type="radio" name="gender" value="male" checked="">男 
              <input type="radio" name="gender" value="female" >女<br>
        爱好：<input type="checkbox" name="love" value="eat">吃饭
              <input type="checkbox" name="love" value="sleep">睡觉
              <input type="checkbox" name="love" value="bat">打豆豆
    </form>

Tag attributes

1)type="属性值" : text type . Attribute values can be:

• text( Default )

• password: Password type

• radio: Radio buttons, the same name as a group of radio buttons (radio buttons, born not mutually exclusive, if you want exclusive, must have the same name attribute .name is the "name."
  ). Very much like the previous radio, press down a button, the other to lift up. So called radio.

• checkbox: Multiple-choice buttons, the same name as a group select button.

• checked: The radio buttons or check buttons by default in the selected state . When <input>the label type="radio", it is possible to use this property. Property values are checked, it may be omitted.

• hidden: Hide the information box that contains the user does not want to see in the form of

• button: Normal button, used in conjunction with js code.

• submit: Submit button, the current form of data transfer to the server or other procedures. This button automatically there will be no need to write value "Submit" text. The submit button really function. After clicking the button, the form will be submitted to the action attribute of the form tag specified that page to go.

• reset: Reset button, empty the contents of the current form, and set the initial defaults

• image: Picture button and submit button functions exactly the same, but the picture button to display the picture.

• file: File selection box.
  prompt:

  If you want to restrict uploaded file types, need to be implemented with JS validation.

  Security checks for uploaded files: First, check the name of the extension, the second is to check the contents of the file data.

2) value="内容": The default contents of the text box (that has been filled out of)

3) size="50": Indicates the text box can be displayed fifty characters . An English or Chinese is considered a character.
Note the size attribute value of the unit instead of pixels oh .

4) readonly: text box read-only and can not be edited. Because of its property value is readonly, so property values can not write.
After using this property, the browser google cursor point does not go; In IE, the cursor may point into, but not edit text.

5) disabled: text box read-only , can not be edited, the cursor does not point into. Attribute values can not write.

type attribute value shorthand

Value of the type property	Manifestations	Code corresponding
text	Single-line text input	<input type=text" />
password	Password input box (not displayed in plain text)	<input type="password" />
date	Date input box	<input type="date" />
checkbox	Check box	<input type="checkbox" checked="checked" name='x' />
radio	Single box	<input type="radio" name='x' />
submit	Submit button	<input type="submit" value="提交" />
reset	Reset button	<input type="reset" value="重置" /> Page does not refresh the entire contents of the input emptied
button	Push button	<input type="button" value="普通按钮" />
hidden	Hidden input box	<input type="hidden" />
file	Text selection box	<input type="file" />

Examples variety of buttons

<form>
    <input type="button" value="我是一个普通按钮">
    <br>
    <input type="submit" value="我是一个提交按钮">
    <br>
    <input type="reset" value="我是一个重置按钮">
    <br>
    <input type="image" src="https://goss.veer.com/creative/vcg/veer/800water/veer-132444248.jpg">
    <br>
    <input type="file" value="我是一个文本选择框">
    
</form>

<select>Drop-down list of tags (inline tag)

<select>Each label inside with <option>representation.

select is the "choice", option "Options."

select the label and ul, ol, dl, are set label.

<select>Tag attributes

• multiple: You can multi-select drop-down list of options. No property value.
• size="2": If the property is greater than 1, then the list is scrolled view. The default attribute value 1, i.e., the pull-down view.

<form>
    <select multiple="2">
        <!--multiple="2"表示可以选两个-->
        <option>小学</option>
        <option>初中</option>
        <option>高中</option>
    </select>

     <select size="2">
        <!--滚动视图，我们可以自己写一写看看效果-->
        <option>小学</option>
        <option>初中</option>
        <option>高中</option>
    </select>
</form>

<option>Tag attributes

• selected: Primaries. No property value.

<form>
    <select multiple="2" size="2">
        <option>小学</option>
        <option>初中</option>
        <option selected="">高中</option>
        <!--你在没有选之前，他会给你预先选一个，但是你可以更改-->
    </select>
</form>

<textarea>Tags: multi-line text entry box (inline tag)

text is "text", area is "area." So you should understand it!

Attributes

• value: Submitted to the server value.
• rows="4": Number of lines of text area.
• cols="20": Specifies the number of columns in the text area.
• readonly: Read-only.

<form>
    <textarea cols="8" rows="5" readonly="">我是个小可爱</textarea>
</form>

<label>Tag (tag inline)

We look at a piece of code

<form action="">
    <input type="radio" name="gender"/>男
    <input type="radio" name="gender"/>女
</form>

The above piece of code will show us a form of sex selection, we will find that after we click on the dot when the appropriate gender will be selected, if a simple click on the text (male or female) when there is nothing with eggs we now want to click on the text (male or female) in time for him to be able to choose, so we <label>label it played a role, he is like a drop of honey, the small dots and characters stick together, let us regardless of clicks small dots or text will select the appropriate gender

In essence, the "male", "female" It does not matter when the two input text and labels, and label is to solve this problem. We can label the input of Chinese characters and wrapped up as a whole.

Solutions are as follows:

Code bearing on ah! ! ! ! ! !

<form action="">
    <input type="radio" name="gender" id="f1"/><label for="f1">男</label>
    <input type="radio" name="gender" id="f2"/><label for="f2">女</label>
</form>

The code above, input tags have a id, then there is a label for the label attribute, and id the same, then the label and input have a binding relationship.

Of course, there are box label :( any form elements have the label)

Continue to send my code !!!!

<form action="">
    <input type="checkbox" id="c1"><label for="c1">记住密码</label>
</form>

Form of semantic

We are a registered site information when there is a part of the required information, some information is optional, this time you can take advantage of semantic form.

<form>
    <fieldset>
    <legend>必填信息</legend>
    姓名：<input value="呵呵">逗比
    <br>
    昵称：<input value="哈哈哈说的就是你" readonly="">
    <br>
    名字：<input type="text" value="name" disabled="">
    <br>
    密码：<input type="password" value="pwd" size="50">
    <br>
    性别：<input type="radio" name="gender" value="male">男
          <input type="radio" name="gender" value="female">女
    邮箱：<input type="email" name="user_email">
         <!--type="email" name="user_email"在提交时会提醒你，必须要符合邮箱的规范-->   
    </fieldset>
    
    <fieldset>
    <legend>其他信息</legend>
    爱好：<input type="checkbox" name="love" value="eat">吃饭
          <input type="checkbox" name="love" value="sleep">睡觉
          <input type="checkbox" name="love" value="buy">买买买
    </fieldset>
</form>