html5之表单学习

左手的ㄟ右手 2022-09-03 02:25 239阅读 0赞

1.form表单主要用于用户与Web服务器进行交互

action:url         用来处理表单信息的服务器地址

method             浏览器用来提交表单的方式        常用的get/post

get:通过这种方式提交的表单数据，会被附加在我们的链接上，通过"?"分割，发送敏感内容不建议使用

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDMwOTY2_size_16_color_FFFFFF_t_70][]

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

表单元素：

input 用于接收来自用户的数据  
            name    用户设定控件名和提交数据的属性名  
            value   用于控件初始化 默认值等功能 （可选）  
            checked 给单选框或者复选框  默认选中  
            disabled 禁用组件 禁用后组件的值也不可提交  
            hidden  隐藏组件 隐藏后的组件值会被提交  
            size    控件的初始宽度 单位是像素（px） 但是text和password除外，他两是指字符的数目  
            maxlength可以输入字符数量的最大值  
            min     number框专用  
            max     number框专用  
            autofocus   自动聚焦  
            required 必填

select:     用于表示列表  或者下拉列表  
                multiple    指定控件类型（列表  或者下拉列表）是否可以多选  
                size        如果multiple生效，size表示同时展开的行数  
                name:   用来表示组件的名字  
          
            option 用于表示选项 包含在select中  
                disabled    表示禁用组件 禁用组件的值不能被提交  
                selected    默认被选中的项  
                value       定义控件的初始值 提交表单时，初始值会被提交  
            optgroup    包含option形成的选项组  
                label   只选项组的名称 包含在select或optgroup中

<form action="" method="get">
                
                列表： <select name="select" id="select" multiple size="2">
                    <option value="value">value1</option>
                    <option value="value">value2</option>
                    <option value="value">value3</option>
    
                <br/>
                </select> 下拉列表： <select name="select" id="select">
                    
                    <optgroup label="水果">
                        <option disabled selected value="">请选择</option>
                        <option value="value1">value1</option>
                        <option value="value2">value2</option>
                        <option value="value3">value3</option>
                    </optgroup>
                 
                </select>
                <br />
                <input type="submit" value="提交">
            </form>

fieldset:对表单中的控件或标签进行分组

legend标签：分组的标题

属性：disabled        直接禁用整个分组

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDMwOTY2_size_16_color_FFFFFF_t_70 1][]

textarea        设置文本框  没有value属性

row        文本框的初始行数

cols        文本框的初始列数

disabled  禁用

readonly  只读  但是可以提交

name

<form action="" method="get">
                <textarea name="text" id="text" cols="30" rows="10" readonly>请输入文本内容</textarea>
                <input type="submit" value="提交">
            </form>

progress    进度条  
            max     默认值是1  
            value   0~1之间 小数

output        表示计算或用户操作的结果。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDMwOTY2_size_16_color_FFFFFF_t_70 2][]

meter   meter>元素用来显示已知范围的标量值或者分数值

datalist    包含了一组<option>元素，这些元素表示其它表单控件可选值.  
            表示其他控件可用的值  
            到select做对比  
            1.select选中后显示的是文本内容 datalist显示value  
            2.提交的时候都是提交value  
            3.在Firefox上只显示内容，而在chrome上显示的是内容和value  
        H5中对input的扩展

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDMwOTY2_size_16_color_FFFFFF_t_70]: /images/20220829/f9a7dd3d5ce74d9b90e313e50762584b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDMwOTY2_size_16_color_FFFFFF_t_70 1]: /images/20220829/768a178711c24aa08fd9256d1b83b8f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDMwOTY2_size_16_color_FFFFFF_t_70 2]: /images/20220829/c1f5c40d46e640e0b60243e811176462.png