HTML 表单

HTML 表单指的是<form>标签包含的内容,MDN 定义如下:

HTML <form>元素表示了文档中的一个区域,这个区域包含有交互控制元件,用来向web服务器提交信息

form

属性:

  • action:提交表单的地址
  • method:提交表单的方式,分为 get 和 post
    post / get 的区别:
    post 比 get 安全,没有大小限制
  • enctype:编码方式,当 method 为 post 时,enctype 是提交 form 给服务器内容的 MIME 类型
    application/x-www-form-urlencoded:默认值
    multipart/form-data:用于 type 为 file 的 input 元素
    text/plain:H5

<form>中包含的元素:

1.label

标签,一般放置于其他表单元素前面

<label for="name">姓名</label>
<input id="name">

属性:
for的作用在于input的获焦,设置的值需于inputid一致

2.input

输入框的type类型有多种:

  • text:默认类型,文本输入
<input type="text">
  • checkbox:多选框,允许用户选择多个选项
<input type="checkbox" name="hobby" value="read">阅读
<!-- checked 默认选中 -->
<input type="checkbox" name="hobby" value="travel" checked>旅游
  • radio:单选框,互斥的选项需设置同一个name
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
  • submit:提交表单
<input type="submit" value="提交">
  • reset:清空表单
<input type="reset" value="重置">
  • hidden:不显示在页面上,但其值会被提交到服务器
<input type="hidden" name="country" value="China">
  • 还有 HTML5 新增的coloremailcolorrangetimenumber等等

3.textarea

文本域,多行输入,可拉伸缩小

<!-- cols 列数,rows 行数 -->
<textarea cols="30" rows="10"></textarea>

4.select

下拉菜单

<select name="city">
  <option value="shanghai">上海</option>
  <option value="wuhan">武汉</option>
  <!-- selected 默认选中 -->
  <option value="shenzhen" selected>深圳</option>
</select>

参考:
1.form 表单
2.input

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • <input>标签 标签用于搜集用户信息,根据不同的type属性值,输入字段拥有很多种形式。输入字段可以是文本字段...
    _空空阅读 4,104评论 0 3
  • 1 表单是如何工作的? 用户在网页上填写表单并提交所填信息,浏览器将用户提交的数据发送至 Web 服务器, Web...
    饥人谷_Mily阅读 1,225评论 0 1
  • 1、关于form表单的基础 form表单:是一个包含表单元素的区域;作用,用于包裹表单元素。 表单元素:是允许用户...
    tangmengyun阅读 717评论 1 1
  • 常见问题 form表单有什么作用?有哪些常用的input 标签,分别有什么作用? HTML 表单用于搜集不同类型的...
    JohnHank阅读 449评论 0 0
  • 早上醒来刮大风,虽然后来出了大太阳,完全不影响低温,吃完早饭,妈妈说允许我今天不用出门,因为太冷,免得我冻到,这突...
    零点一刻阅读 144评论 0 0