HTML-day03

•    表单

        1.主要用于用户于web服务器进行交互

        2.action:URL 用来处理表单信息的服务地址

        3.method:浏览器用来提交表单的http方式，常用的有get/post

        get：通过这种方式提交的表单数据会被附加在链接上，通过“？”分割(不利于隐藏信息，

        安全性不高，不建议使用这种方式)

        post：表单数据会存放在请求报文的体部(请求体)，传递给服务器

        4.name：设置表单的名称

        5.target：_self/_blank(请求提交的方式)

        6.提交表单的内容类型：

        当method为post时，表单内容提交给服务器时的内容类型为：enctype（默认类型）

        当表单中含有文件内容时，表单类型会改为：multipart/form-data

      

•    表单元素

   1.input：用于接受来自用户的数据

     属性： name：用于设定控件名和提交数据的属性名

            value：用于控件的初始化，设置默认值等功能

            checked：单选框或复选框用于默认选中

            disabled：禁用组件，禁用后组件的值也不可以提交

            hidden：隐藏组件，隐藏后的组件值也会被提交

            size：设置控件的初始宽度，单位是px，但是text和password除外，他们是指字符的数目

            maxlength：给出字符和数字的最大值，限制输入的长度

            min/max：设置number框的数字最小值和最大值

   2.select:用于表示列表或者下拉列表

     属性：multiple：指定控件类型（列表或者下拉列表）

               size：如果multiple生效，size表示同时展示的行数

               name：下拉框的名称

              optgroup：包含option后形成选项组

              label：包含选项组的名称

               option：用于表示选项，包含在select中

               disabled：表示禁用组件，禁用组件的值不能被提交

               selected：默认被选中的项

               eg：<option disabled selected value="请选择">请选择</option>

               value：定义控件的初始值，提交表单时，初始值会被提交

             

 

      3. textarea：

               没有value属性

               rows：文本的初始行数

               cols：文本的初始列数

               disabled：禁用    

               readonly:只读，但是值可以提交

               name:用于指定文本域的名称

            

         4. fieldset：在一个表单中对多个控件或标签进行分组

            属性：disabled：直接禁用分组中的所有标签

                 legend：分组的标题名称   

             

        5.  progress：进度条

             value：value值在0~max之间

             max：默认值为1

             <progress value="0.1"></progress>10%

         6. output:表示用户动作产生的结果（以数学中的计算为例）

               <form οninput="result.value=parseInt(num1.value)+parseInt(num2.value)">

               <input type="number" name="number" id="num1" />+

               <input type="number" name="number" id="num2" />=

               <output name="result"></output>

               </form>

        7. meter：通过设定一个数值区域，用进度条的颜色来判定与数值与数值域的比较

              <form action="" method="GET">

               <meter max="100" low="60" high="90" value="40"></meter>40

               <meter max="100" low="60" high="90" value="70"></meter>70

               <meter max="100" low="60" high="90" value="100"></meter>100

              </form>

         8. datalist:表示其它控件可用的值

              与select作对比

              1.select选中后显示的是文本内容，datalist显示value

              2.提交的时候都是提交value

              3.在Firefox上只显示内容，不显示value(chrome显示value)

              

         9. H5中对input的扩展

              autofocus:规定当页面加载时 input 元素应该自动获得焦点。

              placehover=“请输入用户名”（输入框的提示文字）

              required="1\d{10}"限制输入的数字字数——还可以用 maxlength="11"

              pattern:用于数字验证

              required:规定必需在提交之前填写输入字段。如果使用该属性，则字段是必填（或必选）的。