Forms

Form elements

`<form>`element

Express setup form
Path setting address received form the server specified - action properties
The method attribute - representation sent to the server
1. get the property value (default value) - Add data will be submitted to the address bar to commit (limited, insecure)
2. post attribute values - the data will be presented in the form of binding submit (no limit, relatively safe)
The name attribute - To set the name attribute when the form is submitted, or could not submit form

<body>
<!--
     form元素 - 表示设置表单
     * action属性 - 设置接收表单的指定服务器端的地址路径
     * method属性 - 表示发送给服务器端的方式
      * get属性值（默认值） - 将提交的数据添加到地址栏中进行提交（有限制，不安全）
      * post属性值 - 将提交的数据绑定在表单中进行提交（没有限制，相对安全）
     * name属性 - 提交表单时要设置name属性，不然无法提交表单
 -->
<form action="#" method="post">
    <input type="text" name="txt">
    <input type="submit">
</form>
</body>

Input box

`<input>`element

Set expressed in the form of search box
property type - means that the definition of what type of input box
1. text property - textbox
2. password property value - the password box
3. email attribute values - the message input box (format will be required)
4. url attribute values - the URL input box (format will be required)
5. attribute value number - Defines digital control (numerical only)

<body>
<!--
     input元素 - 表示设置表单中的搜索框
      * type属性 - 表示定义什么类型的输入框
       * text属性值 - 文本框
       * password属性值 - 密码框
       * email属性值 - 邮件输入框(会有格式要求)
       * url属性值 - 网址输入框(会有格式要求)
       * number属性值 - 定义数字控件(只能输入数字)
       * search - 搜索框(在移动端浏览器有效)
       * tel - 电话框(在移动端浏览器有效)
 -->
<form action="#">
    <input type="text">
    <input type="password">
    <input type="email">
    <input type="url">
    <input type="number">
    <input type="search">
    <input type="tel">
</form>
</body>

Input box properties

attribute value - may be used to set or get data contents of the input box
placeholder property - related information may be provided using input box
The autofocus attribute - automatically get the focus, do not click on the input box you can first select the input box
disabled attribute - indicates the current input block is not available
readonly property - indicates the current input box can only be read, not typing

<form action="#">
    <!--
         value属性 - 可以用来 设置 或 获取 输入框中的数据内容
         placeholder属性 - 可以提供使用输入框的相关信息
         autofocus属性 - 可以自动获取焦点，不用点击输入框就可以先选择输入框
         disabled属性 - 表示当前输入框不可用
         readonly属性 - 表示当前输入框只能读，不能输入内容
     -->
    <input type="text" value="输入内容">
    <input type="text" placeholder="输入用户名">
    <input type="text" autofocus>
    <input type="text" disabled>
    <input type="text" readonly>
</form>
</body>

Form controls

<input>Element - you can set the form's controls

property type - type definition control

date property values - Define the date control
month property values - Define Controls month
week attribute values - defined control cycle
color attribute values - defined color selection control

<body>
<form action="#">
    <!--
        <input>元素 - 可以设置表单中的控件
        * type属性 - 定义控件的类型
         * date属性值 - 定义日期控件
         * month属性值 - 定义月份控件
         * week属性值 - 定义周期控件
         * color属性值 - 定义选择颜色的控件
         * rang属性值 - 定义滑动条控件
     -->
    <input type="date">
    <input type="month">
    <input type="week">
    <input type="time">
    <input type="color">
    <input type="range">
</form>
</body>

Push button

<input>Element - you can set the form button to submit the form to achieve, or other functions

property type - type setting button

submit property value - set submit button (a form submission)
reset attribute values - the set-reset button (Reset content input box)
button attribute value - setting push button

<button>Element - Indicates the setting button

The assembly element is not in the form
If the element is used in a form, also having a form submission function

<body>
<form action="#">
    <!--
        <input>元素 - 可以设置表单中按钮，用于实现提交表单、或其他功能
         * type属性 - 设置按钮的类型
          * submit属性值 - 设置提交按钮(提交表单)
          * reset属性值 - 设置重置按钮(重置输入框中的内容)
          * button属性值 - 设置普通按钮
           * 普通按钮没有特殊显示，可以通过value属性来设置
     -->
    <input type="submit">
    <input type="reset">
    <input type="button" value="按钮">
    <!--
        <button>元素 - 表示设置按钮
        * 该元素不是表单中的组件
        * 该元素如果被使用在表单中，也具有提交表单的功能
     -->
    <button>按钮</button>
</form>
</body>

Image component

<input>Element - can be defined image component

type property - set image component

image property values - defined component image
src attribute - the introduction path of the image

Introduced by the picture image component has the effect of form submission

<body>
<form action="#">
    <!--
        <input>元素 - 可以定义图像组件
         * type属性 - 设置图像组件
          * image属性值 - 定义图像组件
          * src属性 - 引入图像的路径
         * 通过图像组件引入的图片具有提交表单的作用
     -->
    <input type="image" src="imgs/180731.jpg">
</form>
</body>

Radio buttons and check boxes

Single-box - type property indicates the value of the attribute set radio check box
Checkbox - checkbox attribute type attribute indicates the setting checkbox
By the name attribute into a group a plurality of checkboxes
checked property - represents the default selected item

<body>
<form action="#">
    <!--
         单选框 - type属性 的 radio属性值 表示设置单选框
         * 通过 name属性 将多个单选框分为一组
         * checked属性 - 表示默认被选择项
     -->
    <input type="radio" name="input-rad" checked>我是谁
    <input type="radio" name="input-rad">我在那
    <input type="radio" name="input-rad">我要干啥

    <br>

    <!--
         多选框 - type属性 的 checkbox属性值 表示设置多选框
         * 通过 name属性 将多个多选框分为一组
         * checked属性 - 表示默认被选择项
     -->
    <input type="checkbox" name="inout-che">手机
    <input type="checkbox" name="inout-che" checked>电脑
    <input type="checkbox" name="inout-che">游戏机
</form>
</body>

File field

File Domain - allows user to select a local file to open the page, upload local files

Type setting file currently received - accept properties
multiple attribute - may receive multiple files simultaneously
enctype attribute - setting mode when the form is submitted

application / x-www-form-urlencoded attribute value (default value) - form of the data represented in the form is submitted
multipart / form-data attribute values - expressed as to submit a form file (file field may be achieved when using file upload)

Upload Files

Enctype attribute property value can only multipart / form-data
Property value method can only attribute to post

<body>
<!--
     文件域
     * 允许用户在页面中打开选择本地文件、上传本地文件
     * accept属性 - 设置当前接收文件的类型
     * multiple属性 - 可以同时接收多个文件
     * enctype属性 - 设置提交表单时的
     方式
      * application/x-www-form-urlencoded属性值（默认值） - 表示以数据的方式提交表单
      * multipart/form-data属性值 - 表示将表单以文件的方式提交（在文件域中使用时可以实现文件上传）

     * 实现文件上传
      * enctype属性的属性值只能为 multipart/form-data
      * method属性的属性值只能为 post
 -->
<form action="#" method="post" enctype="multipart/form-data">
    <input type="file" accept="image/jpeg" multiple>
    <input type="submit">
</form>
</body>

Text fields and hidden fields

<textarea>Element - expressed in a form text field

cols attribute - represents the column text field
rows property - bank said in a text field

Hidden Field - through hidden property value of the type attribute set

There is no display on the page

<body>
<form action="#">
    <!--
        textarea元素 - 表示表单中的文本域
         * cols属性 - 表示文本域中的列
         * rows属性 - 表示文本域中的行
     -->
    <textarea cols="30" rows="10"></textarea>

    <br>

    <!--
        隐藏域 - 通过type属性的 hidden属性值设置
         * 在页面中没有任何显示效果
     -->
    <input type="hidden">
</form>
</body>

drop-down list

<select>Element - expressed in a form defined drop-down list

multiple properties - selection list can be turned into a multi-select list
size attribute - represents the number of multi-selection list is displayed

<option>Element - indicates drop-down list of options

selected property - represents a list of the currently selected default option

<optgroup>Elements - another multi-selection list, the options can be classified

<body>
<form action="#">
    <!--
         select元素 - 表示定义表单中的下拉列表
          * multiple属性 - 可以将单选列表变成多选列表
          * size属性 - 表示多选列表的显示个数
         option元素 - 表示下拉列表中的选项
          * selected属性 - 表示当前列表中默认被选中的选项
         optgroup元素 - 另一种多选列表，可以对选项进行分类
     -->
    <!-- 单选列表 -->
    <select>
        <option selected>手机</option>
        <option>电脑</option>
        <option>游戏机</option>
    </select>

    <!-- 多选列表 -->
    <select multiple size="3">
        <option selected>手机</option>
        <option>电脑</option>
        <option>游戏机</option>
    </select>

    <!-- 另一种多选列表 -->
    <select multiple>
        <optgroup>
            <option selected>我是谁</option>
            <option>我在那</option>
            <option>我要干啥</option>
        </optgroup>
        <optgroup>
            <option selected>你谁呀</option>
            <option>你要干啥</option>
            <option>站那别动</option>
        </optgroup>
    </select>
</form>
</body>

Combination of form elements

<fieldse>t element - expressed in a form components are grouped
<legend>Element - indicates the title of the packet assembly disposed
<fieldset>Elements and <legend>elements need to be used

<body>
<form action="#">
    <!--
         fieldset元素 - 表示对表单中的组件进行分组
         legend元素 - 表示对分组的组件设置标题
         * fieldset元素 和 legend元素 需要配合使用
     -->
    <fieldset>
        <legend>查询</legend>
        <input type="text">
        <input type="submit">
    </fieldset>
</form>
</body>

form validation

Form Validation - to validate form data before the form is submitted
1. Meet the validation - submit the form
2. Does not meet the validation - prompt, modified as conditions
Verify property
1. required attributes - Indicates verify the contents of the current component is empty
2. minlength Properties - representation (digits or letters) of the current contents of components (text) minimum length
3. maxlength attribute - represents (digits or letters) of the current contents of components (text) the maximum length of
4. min Properties - represents the content is less than the current component value min (using the digital input block)
5. max attribute - that the current in the component that is greater than the value min (using the digital input block)
6. step attribute - that the current contents of each component to increase or decrease the value (in digital input block)
There are also a form input box comes verify the effects
1. Enter the e-mail box - as required by the input email address
2. Enter the URL box - Enter the URL accordance with the requirements of
3. Digital input box - only numbers
4. Color input boxes - only a predetermined color

Construction of static pages of the [form]

Forms

Form elements

`<form>`element

Input box

`<input>`element

Input box properties

Form controls

Push button

Image component

Radio buttons and check boxes

File field

Text fields and hidden fields

drop-down list

Combination of form elements

form validation

Guess you like

Construction of static pages of the [form]

Forms

Form elements

<form>element

Input box

<input>element

Input box properties

Form controls

Push button

Image component

Radio buttons and check boxes

File field

Text fields and hidden fields

drop-down list

Combination of form elements

form validation

Guess you like

`<form>`element

`<input>`element