美文网首页
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