HTML 表单的用法

form标签:

表单作用:搜集用户填写的信息,提交给网站后台(即服务器)
属性:

  • action:信息要提交的地址
  • method: 浏览器向后台传输数据的方式:get或者post(区别见上一片文章)
  • target:在何处打开action(用的较少)
  • entype:
    1.application/x-www-form-urlencoded:在发送前编码所有的字符(默认)
    2.text/plain:空格转换为"+"号,但不对特殊字符编码
    3.mutipart/form-data:使用包含文件上传控件的表单时,必须用该值
    表单需要用form标签包围,格式如下:
<form action="信息要提交的地址" method="post/get"></form>

常见input标签及属性

  • input标签使用type属性的值来规定input元素的类型,常见有以下类型:

常见:

type 作用
text 定义单行输入框,可在其中输入文本
password 密码输入框,输入的内容在页面上以圆点展示
checkbox 定义复选框
radio 定义单选框
file 定义输入字段和“浏览”按钮,供文件上传
hidden 隐藏的标签。可以用来发送默认项或者进行安全校验
button 定义可点击的按钮,不可提交
submit 定义提交按钮,把表单数据发给服务器
reset 定义重置按钮,用于清除表单中的用户输入的数据
image 定义图像形式的提交按钮

非常见:

type 作用
url URL的绝对地址
email 邮件地址
search 无换行的搜索框
tel 无换行的电话号码框
date 日期输入框,可以选择日期
time 时间输入框
number 数字输入框,整数小数都可以
range 范围选择框,0~100
color 选择颜色

select标签

  • 下拉菜单
  • 格式:
<select name="aa" id="bb">
<option value="xx">xx</option>
</select>

注:在option标签中加一个selected表示默认选择

taxtarea标签

  • 一个可以多行输入的文本框
  • 格式:
    <textarea name="comment" id="comment" cols="30" rows="10">ddd</textarea>

label标签

  • for属性可以与input的id属性配合,点击输入框前的文字时,也能进入focus状态
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、表单 1. 表单的作用 HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户...
    zx9426阅读 457评论 0 1
  • 1、关于form表单的基础 form表单:是一个包含表单元素的区域;作用,用于包裹表单元素。 表单元素:是允许用户...
    tangmengyun阅读 712评论 1 1
  • HTML 表单用于搜集不同类型的用户输入。用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。HTM...
    FLYSASA阅读 448评论 0 0
  • 什么是form表单 表单在网页中主要负责数据采集功能,把用户填写的信息提交到网站的后台服务器。 form标签的常用...
    ezrealor阅读 280评论 0 0
  • 第一次采用RIA拆书法进行拆书,R和I 是老师提供的。 R·阅读原文片段 非暴力沟通强调,感受的根源在于我们自身。...
    苏妤影阅读 361评论 5 0