• [06]HTML基础之表单标签


    1. <form>标签

    表单容器,指定method属性和action属性是个良好的习惯。

    <form methor="POST" action="http://www.juetan.cn/user/1">
        //其他属性:
        name:表单名称,便于在Javascript中引用该表单。
        target:表单提交的窗口怎么打开,_self(默认),_top,_blank,_parent四种值。
        enctype:内容类型,application/x-www-form-urlencoded(默认),multipart/
                form-data,text/plain三种值。
        autocomplete:自动完成,如果之前填写过表单,再次输入时可快速完成输入。
        novalidate:不验证表单数据的格式是否正确。
        accept-charset:表单提交时所使用的字符集,如UTF-9,ISO-8859-1等。
    </form>
    

    2. <fieldset>标签

    表单集合,一般将多个输入归为某类;与<legend>标签搭配,后者表示该集合的标题;两者结合表现为黑色边框加标题。

    <fieldset>
        <legend>包装信息</legend>
        //如外壳颜色,盒子样式,盒子长度等选项
    </fieldset>
    

    3. <select>标签

    下拉列表,指定name属性是个好习惯;与<opgroup>标签、<option>标签搭配,<opgroup>标签指定label属性、<option>属性指定value属性也是个好习惯。

    <select name="city">
        <optgroup label="广东省">其他属性:
            <option value="sz">深圳</option>
        </optgroup>
        <optgroup label="广西省">
            <option value="gg">贵港</option>
        </optgroup>
    </select>
    
    
    [1] <select>标签属性:
    name(列表名称):文本值,表单提交的时候用到;
    form(所属表单):表单id,多个表单以空格分隔;
    multiple(允许多选):布尔值,默认false;
    size(显示数量):数值,下拉列表显示多少个选项;
    required(必须选择):布尔值,默认false;
    disabled(禁用列表):布尔值,默认false;
    autofocus(自动完成):布尔值,默认false;
    
    [2] <optgroup>标签属性:
    label(分组描述):文本值;
    disabled(禁用选项):布尔值,默认false;
    
    [3] <option>标签属性:
    value(属性值):文本值;
    selected(被选中):布尔值,默认false;
    label(标签):文本值,在<optgroup>选项分组中使用;
    disabled(禁用选项):布尔值,默认false。
    

    4. <output>标签

    表示输出结果;<meter>标签表示数值量程,表现为水平圆柱进度效果;<progress>标签表示任务进度,表现为水平矩形进度效果。

    //输出结果
    <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
    <input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
    </form>
    //数值量程
    <meter value="60" min="0" max="100">不支持该标签时显示</meter>
    //任务进度
    <progress></progress>
    
    
    [1] <output>标签属性:
    name(选项名称):文本值,表单提交时用到;
    for(关联元素):与输出结果有关联的选项,多个值以空格分开;
    form(所属表单):表单id,多个值以空格分隔;
    
    [2] <meter>标签属性:
    value(当前值):数值;
    min(量程最低值):数值,当前值不能低于该数值;
    max(量程最大值):数值,当前值不能大于该数值;
    low(低值):数值,如果当前值低于该值,量程颜色由绿色变为黄色;
    hight(高值):数值,如果当前值高于该值,量程颜色由绿色变为黄色;
    optimum(最优值):数值,当前量程的最优值;
    form(所属表单):表单id,多个值以空格分隔;
    
    [3] <progress>标签属性:
    value(当前值):数值;
    max(最大值):数值,任务的最终值;
    

    5. <datalist>标签

    表示<input>标签的可能预选项,<datalist>标签指定id属性,<input>标签的list属性指定<datalist>标签的id属性

    <input name="game" list="game-list"> 
    <datalist id="game-list">
        <option value="lol"></option>
        <option value="cf"></option>
    </datalist>
    

    6. <label>标签

    表示输入框的标签,与<input>标签搭配使用。

    //可以与<input>标签并列使用(需要指定for属性)
    <input type="radio" name="switch">  <label for="switch">开关</label>
    //也可以包含<input>标签(无需指定for属性)
    <label><input type="radio" name="switch">开关</label>
    

    7. <textarea>标签

    表示文本输入域,适合多行文本输入。

    <textarea name="comment">
    
    </textarea>
    
    属性:
    name(输入框名称):文本值,表单提交时用到;
    cols(可见列数):数值;
    rows(可见行数):数值;
    wrap(如何换行):hard(硬分行),soft(软分行);
    maxlength(最大字符数):整数,文本框可输入的最大字符数;
    placeholder(输入提示):文本值,以浅灰色字体显示在文本框的简短提示;
    readonly(是否只读):布尔值,默认false;
    required(是否必填):布尔值,默认false;
    disabled(是否禁用):布尔值,默认false;
    autofocus(自动聚焦):布尔值,默认false;
    

    8. <button>标签

    表示按钮。

    //作为普通按钮使用
    <button type="button">退出</button>
    //作为表单提交按钮使用(需在form元素内使用)
    <button type="submit">提交</button>
    

    9. <input>标签(单标签)

    表示输入框,极其强大的输入类型(23种),构成表单丰富的交互体验。

    //最最常用的属性
    <input name="username" type="text" value="juetan">
    
    
    一般传统属性:
    name(输入框名称):输入框的名称,应当唯一,表单提交时用到;
    value(输入框的值):输入框名称对应的值;
    type(输入框类型):共23种输入框类型,7个专属属性
        text(文本),与maxlength属性搭配
        password(密码),与maxlength属性搭配
        radio(单选),与checked属性搭配
        checkbox(多选),与checked属性搭配
        file(文件),专属属性:accept属性
        hidden(隐藏)
       image(图片),专属属性:alt属性,src属性,width属性,height属性
       button(按钮)
       reset(重置)
       submit(提交)
       
       week(周几)
       month(月数)
       date(日期)
       time(时间)
       datetime(日期时间)
       datetime-local(本地日期时间)
       number(数字)
       email(邮箱)
       url(链接)
       search(搜索)
       tel(电话)
       range(范围)
       color(颜色)
       
    form(所属表单):表单id,多个表单id以空格分隔;
    size(输入大小):对于text或password来说,表示可见字符数,对于其他类型,表示宽度
    
    autocomplete(自动完成)
    autofocus(自动聚焦)
    novalidate(不验证内容)
    list(可选列表): 只与<datalist>标签搭配使用;
    min(最小值)
    max(最大值)
    step(数值间隔)
    
    multiple(是否允许多值):只适用于type="file"和"email"的input元素;
    pattern(验证模式):正则表达式;
    placeholder(占位符)
    
    required(是否必填):true,false;
    readonly(是否只读):true,false;
    diasbled(是否禁用):true,false;
    
    
    
    表单重写属性:
    formmethod(表单方法):GET,POST,PATCH,DELETE等;
    formaction(提交地址): URL格式;
    formenctype(加密方式):text/x-www-form-urlencoded,multiple/form-data;
    formvalidate(验证内容):true,false;
    formtarget(打开方式):_self,_parent,_top,_blank;
    
  • 相关阅读:
    jquery处理鼠标左中右键事件
    bootstrap弹出框
    移动端去掉a标签点击时出现的背景
    sessionStorage
    页面滑动到最下面,执行代码
    判断页面时向上滚动还是向下滚动
    sql 时间查询 /sql中判断更新或者插入/查询一年所有双休日
    求取最大值
    Repeater 获取数据值
    加载完毕后执行计算
  • 原文地址:https://www.cnblogs.com/juetan/p/13033255.html
Copyright © 2020-2023  润新知