Forms表单

form

  • method

method提交表单的请求方式get或者post
<form method="get"></form>
<form method="post"></form>
  • action

action提交表单的地址
<form action="/login"></form>
  • enctype

enctype发送表单数据之前如何对其进行编码
<form action="/login" method="post" enctype="application/x-www-form-urlencoded"></form>

application/x-www-form-urlencoded(默认编码方式)在发送前编码所有字符
multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。
text/plain 空格转换为 "+" 加号,但不对特殊字符编码。

更多form属性

input

  • type

描述
text文本
radio单选按钮
checkbox复选框
submit提交按钮
button按钮
hidden隐藏的输入字段
image图像形式的提交按钮
password密码字段
file上传文件
reset重置按钮
radio单选按钮。单选按钮只允许用户选择中其中一个选项。
一组radio的name值要相同,例如:
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
checkbox复选框按钮。复选框按钮允许用户选择中其中一个或者多个选项。
一组checkbox的name值要相同,例如:
<input type="checkbox" name="ball" value="basketball">篮球
<input type="checkbox" name="ball" value="football">足球
<input type="checkbox" name="ball" value="tennis">网球
<input type="checkbox" name="ball" value="volleyball">排球
button按钮,点击之后执行相应绑定的事件
image图像形式的提交按钮,submit提交按钮,点击之后提交表单中的数据
<input type="image" src="/image/submit.jpg">
<input type="submit">
  • placeholder

placeholder提示信息
<input type="text" placeholder="提示信息">
  • autocomplete

autocomplete自动填充功能
<input type="text" autocomplete="on">  开启自动填充功能
<input type="text" autocomplete="off"> 关闭自动填充功能
  • autofocus

autofocus页面加载时是否获得焦点(不适用于type="hidden")
<input type="text" autofocus="autofocus">
  • pattern

pattern规定输入字段值的格式(正则校验)
<input type="text" pattern="[0-9]">

更多input属性

label

label点击label标签时,浏览器会自动触发对应将焦点转到和标签相关的表单元素上
label标签的for属性的值需要和对应表单元素的id值相同
<form>
    <label for="male">男</label>
    <input type="radio" name="sex" value="male" id="male">
    <label for="female">Female</label>
    <input type="radio" name="sex" value="female" id="female">
</form>

更多label属性

textarea

textarea多行文本输入表单元素
可以通过rows和cols规定textarea尺寸
<textarea cols="30" rows="10"></textarea>

更多textarea属性

select

select下拉菜单
<select>
    <option value="beijing" selected="selected">北京</option>
    <option value="shanghai">上海</option>
    <option value="shenzhen">深圳</option>
</select>

更多select属性

查看浏览器支持情况

    原文作者:stylever
    原文地址: https://segmentfault.com/a/1190000008966963
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞