美文网首页
form表单

form表单

作者: fb941c99409d | 来源:发表于2019-12-13 21:58 被阅读0次

    form属性

    name 
    action
    method
    target:_self  _blank _top _parent
    autocomplete="on默认/off" 可以使刷新页面后,点输入框显示之前输入的历史并选择,若不想显示,input里也可以使用置为off
    enctype:
        application/x-www-form-urlencoded(默认) 窗体数据被编码为名称/值对。这是标准的编码格式。在发送前对所有字符进行编码。
        multipart/form-data  窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分,不对字符编码。当使用有文件上传控件的表单时,该值是必需的。如果表单中有文件要上传,表单中form标签必须设置enctype="multipart/form-data"来确保匿名上传文件的MIME编码。默认情况下,表单的编码格式是 application/x-www-form-urlencoded,不能用于文件上传
        text/plain: 窗体数据以纯文本形式进行编码,其中不含任何控件或格式字符,邮件处理中用到,其他地方很少用。将空格转换为 "+" 符号,但不编码特殊字符。抓包可见数据形式。
    
    

    通用属性

    禁用input select textarea
      <input disabled="disabled" />
    提示文字 input textarea
      <input placeholder="请输入..." />
    最大输入字符数
      <input maxlength="10" />
    点击label内的文字 id值等于for值的input将获得焦点
      <label for="uname">用户名: </label> "
    H5新增
    autofocus:规定在页面加载时,域自动地获得焦点 autofocus属性适用于所有<input>标签的类型
      <input autofocus="autofocus">
    autocomplete
        <input autocomplete="off">
    require  使用了该属性,则此输入框是必填(或必选)的。
        <input type="text" required="required"/>
    readonly 设置后input为只读状态 无法修改
       <input type="text" readonly="readonly"/>
    

    重置表单元素样式

    input {outline:0;一般取消掉 获得焦点后的边框样式 }
    textarea{resize:0 ;防止文本域拖拽  outline:0 }
    

    input

    type属性值
        text 文本域
        password 掩码
        radio 单选
        checkbox 多选
    
        file 文件
        image 图像域 图像提交按钮
        hidden 隐藏域
        submit 提交
        button 按钮
        reset 重置
    H5新增属性
        email <!-- 针对手机端出现特殊键盘-->
        number <!-- PC端只可输入数字与运算符号,手机端出现特殊键盘-->
        url 
        tel <!-- 针对手机端出现特殊键盘-->
    
        date <!-- 选取日,月,年-->
        month <!-- 选取月,年-->
        week<!-- IOS不兼容  选取周,年  因为这种不实用-->
        time <!-- 选取小时分钟-->
        datetime<!-- PC端不兼容选取选取时间,日,月,年(UTC时间) ,IOS10以上版本越不兼容-->
        datetime-local <!-- 选取时间,日,月,年(本地时间)-->
        
        range <!--托动杆。可设min/max 最小和最大值-->
        search <!--类似于搜索框(尾部有小x)-->
        color <!--全色彩选择,可用来在线调整编辑器,文本编辑-->
        
    文本
        <label for="uname">用户名: </label> "
         //size输入框长度
        <input id="uname" type="text" name="username" value="" placeholder="请输入用户名" size="20" maxlength="10" />
    密码     
        <input type="password" name="password" value="" />
    单选
        <input id="male" type="radio" name="gender"" value="male" checked/><!--checked选中-->
        <label for="male">男</label>
        <input type="radio" name="gender" value="female" />
    多选
        <input type="checkbox" name="hobby" value="sing" checked/>唱
        <input type="checkbox" name="hobby" value="dance" />跳
        <input type="checkbox" name="hobby" value="rap" />rap
    文件: 
        <input type="file" name="avatar" multiple> <!--H5 新增 mutiple多文件上传-->
    邮箱
        <input type="email" multiple="multiple"/> <!--mutiple多文件上传-->
    按钮
    <input type="submit" value="提交">
    <input type="button" value="按钮">
    <input type="reset" value="重置">
    <input type="image" src="./img/image-button.png">
    

    select

    select标签属性
        name
        size     设置列表中可见的项目数
        multiple 设置可选择多个选项
    option标签属性
        selected选中状态
        value
    optgroup 为option进行分组
       label 分组名
    
    <select name="eat" multiple size=5>
        <option value="">--请选择--</option>
        <optgroup label="水果">
            <option value="1" selected>苹果</option>
            <option value="1">猕猴桃</option>
            <option value="1">杏子</option>
        </optgroup>
        <optgroup label="蔬菜">
            <option value="1">西红柿</option>
            <option value="1">白菜</option>
            <option value="1">油麦菜</option>
        </optgroup>
    </select>
    

    textarea

    没什么写的 懒得写
    

    datalist

    <input type="text" value="输入明星" list="star"/> <!--  input里面用 list -->
    
    <datalist id="star">  <!-- datalist 里面用 id  来实现和 input 链接 --> 
    
        <option>刘德华</option>
    
        <option>刘若英</option>
    
     </datalist>
    

    fieldset

    为表单项进行分组
    <form>
      <fieldset>
        <legend>分组名</legend>
        <input />
        ...
      </fieldset>
    </form>
    

    相关文章

      网友评论

          本文标题:form表单

          本文链接:https://www.haomeiwen.com/subject/jvefnctx.html