简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >Web 前端 - HTML - 表单元素

Web 前端 - HTML - 表单元素

郴
郴原创
2020年04月06日 11:47:591151浏览

Web 前端 - HTML - 表单元素

[toc]

一、表单域元素

1. 标签

序号 标签 描述
1 <form> 定义表单
2 <fieldset> 定义表单的边框
3 <legend> 定义表单的标题
4 <label> 为输入控件定义标注
5 <input> 定义输入控件
6 <textarea> 定义多行文本域
7 <datalist> 定义预定义的复合框
8 <option> 定义选择列表中的选项，和<datalist>、<select>元素配合

2. 属性

序号 属性 描述 适用元素
1 action 表单提交的 URL 地址(处理表单请求的脚本) <form>
2 method 表单提交类型:GET/POST <form>
3 enctype 设置表单提交数据的编码方式 <form>
4 name 表单唯一名称,与 ID 同义 <form>
5 target 打开请求 URL 的方式,如果_blank <form>
6 name 表单边框的名称 <fieldset>
7 form 表单边框所属的一个或多个表单，它的值为<form>元素的 id 值 <fieldset>
8 for 规定标注与哪个<input>元素绑定，它的值为<input>元素 id 值 <label>
9 form 标注所属的一个或多个表单，它的值为<form>元素的 id 值 <label>
11 value 请求参数的值 <option>
12 label 默认选项文本值 <option>
13 selected 是否选中(布尔属性) <option>
14 disabled 是否禁用(布尔属性) <option>

3. 值

序号 值 描述 适用属性
1 application/x-www-form-urlencoded 默认值。标准编码格式（key=value&key=value） enctype
2 multipart/form-data 不对字符进行编码，每个控件对应消息中的一部分 enctype

4. <input>标签详解

4.1 属性

序号 属性 描述 备注
1 type 定义输入控件的类型
2 placeholder 规定提示信息 适用于type="text"、type="password"等
3 maxlength 规定最大字符数 适用于type="text"、type="password"等
4 size 规定输入框的以字符数计的可见宽度 适用于type="text"、type="number"等
5 max 规定最大值 适用于type="number"、type="date"等
6 min 规定最小值 适用于type="number"、type="date"等
7 step 设置步长 适用于type="number"
8 multiple 可以选择多个文件 适用于type="file"
9 width 设置图片的宽度 适用于type="image"
10 height 设置图片的高度 适用于type="image"
11 checked 设置单选框和复选框的默认值 适用于type="radio"、type="checkbox"
12 list 规定控件与<datalist>元素进行绑定，它的值为<datalist>元素 id 值 适用于type="text"
13 pattern 规定用于验证输入字段合法性的正则表达式 适用于type="text"、type="password"等
14 autofocus 页面加载时是否自动获取焦点 适用于type="text"、type="number"等
15 autocomplete 是否记住注册表 适用于type="text"、type="number"等
16 required 规定提交表单时必须输入字段 适用于type="text"、type="password"等
17 readonly 字段只读 适用于type="text"、type="number"等
18 disabled 禁用该控件 适用于type="text"、type="password"等
19 name 请求参数的名称,对应于脚本处理的变量名
20 value 请求参数的值,对应于脚本处理的变量值,使用预定义值控件无效 适用于type="radio"、type="checkbox"等
21 form 控件所属的一个或多个表单，它的值为<form>元素的 id 值

4.2 值

序号 值 描述 适用属性
1 text 定义单行文本域 type
2 password 定义密码字段 type
3 hidden 定义隐藏域 type
4 number 定义数字字段 type
5 email 定义邮箱字段 type
6 date 定义日期控件 type
7 file 定义文本域 type
8 image 定义图像域 type
9 radio 定义单选框 type
10 checkbox 定义复选框 type
11 on 开启注册表记录功能 autocomplete
12 off 关闭注册表记录功能 autocomplete

5. <textarea>标签详解

5.1 属性

序号 属性 描述
1 cols 定义文本域可视宽度
2 rows 文本域可输入的行数
3 minlength 允许输入最小字符长度
4 maxlength 允许输入最大字符长度
5 wrap 换行方式
6 placeholder 提示信息占位符
7 disabled 禁用(布尔属性)
8 autofocus 自动获取焦点(布尔属性)
9 autocomplete 自动完成(布尔属性)
10 name 文本域参数名称
11 form 绑定所属表单元素

5.2 值

序号 值 描述 适用属性
1 soft 默认。不换行 wrap
2 hard 换行 wrap

二、按钮元素

1. 标签

序号 标签 描述
1 <select> 定义下拉列表
2 <optgroup> 定义选项组的描述信息
3 <button> 定义按钮

2. 属性

序号 属性 描述 适用元素
1 label 描述信息 <optgroup>
2 type 定义按钮的类型 <button>
3 formaction 设置不同按钮可将表单数据提交到不同的 URL 处理 <button>
4 formmethod 规定发送表单数据的方法 <button>
5 fortarget 规定如何打开 action URL <button>
6 disabled 禁用该控件 <button>
7 name 按钮的唯一名称,与 ID 等效 <button>
8 value 按钮文本初始值,可通过 JavaScript 修改 <button>
9 form 按钮所属的一个或多个表单，它的值为<form>元素的 id 值 <button>

3. 值

序号 值 描述 适用属性
1 button 可点击的按钮 type
2 submit 提交按钮 type
3 reset 重置按钮 type
4 submit 提交按钮 type
5 GET 数据以key=value形式附加在 URL 中发送 formmethod
6 POST 数据以key=value形式放在消息主体中发送 formmethod
7 _self 默认值。 在当前页打开 fortarget
8 _blank 在新选项卡打开 fortarget

三、一些事件

序号 事件属性 描述 备注
1 onchange 域的内容改变时触发 配合<select>元素
2 onselect 文本框中的文本被选中时触发 配合<textarea>元素
3 onclick 只要点击就会触发(选项值可以不改变)

四、综合实例

1. 搜索框

  1. <form id="search_f" style="width: 400px; height: 30px; margin: 0 auto;">
  2.   <!--搜索内容输入框-->
  3.   <input
  4.     type="search"
  5.     name="content"
  6.     id="search"
  7.     placeholder="Search"
  8.     autocomplete="on"
  9.     style="width: 350px;  height: 30px; display: inline-block; float: left;"
  10.   />
  11.   <!--提交按钮-->
  12.   <button
  13.     type="submit"
  14.     form="search_f"
  15.     formaction="search.php"
  16.     formmethod="GET"
  17.     formtarget="_blank"
  18.     style="width: 50px; height: 30px; display: inline-block; float: left;"
  19.   >
  20.     搜索
  21.   </button>
  22. </form>

2. 登录/注册表单

  1. <form id="login_register" style="width: 265px; margin: 0 auto;">
  2.   <fieldset>
  3.     <legend>你好，请登录或注册</legend>
  4.     <!--用户名输入框-->
  5.     <div>
  6.       <label for="username">用户名:</label>
  7.       <input
  8.         type="text"
  9.         placeholder="请输入用户名"
  10.         name="username"
  11.         id="username"
  12.         autofocus
  13.         autocomplete="on"
  14.         required
  15.       />
  16.     </div>
  17.     <!--密码输入框-->
  18.     <div>
  19.       <label for="passwd">密码:</label>
  20.       <input
  21.         type="password"
  22.         placeholder="请输入密码"
  23.         name="passwd"
  24.         id="passwd"
  25.         required
  26.         style="margin-left: 15px;"
  27.       />
  28.     </div>
  29.     <!--登录和注册按钮-->
  30.     <div>
  31.       <button
  32.         type="submit"
  33.         formaction="login.php"
  34.         formmethod="POST"
  35.         formenctype="application/x-www-form-urlencoded"
  36.         formtarget="_self"
  37.         form="login_register"
  38.         style="margin-left: 56px; margin-top: 2px;"
  39.       >
  40.         登录
  41.       </button>
  43.       <button
  44.         type="submit"
  45.         formaction="register.php"
  46.         formmethod="POST"
  47.         formenctype="application/x-www-form-urlencoded"
  48.         formtarget="_self"
  49.         form="login_register"
  50.         style="margin-left: 5px; margin-top: 2px;"
  51.       >
  52.         注册
  53.       </button>
  55.       <button
  56.         type="reset"
  57.         form="login_register"
  58.         style="margin-left: 5px; margin-top: 2px;"
  59.       >
  60.         重置
  61.       </button>
  62.     </div>
  63.   </fieldset>
  64. </form>

3. 个人信息设置表单

  1. <form id="setup" style="width: 300px; margin: 0 auto;">
  2.   <fieldset>
  3.     <legend>请设置您的个人信息</legend>
  4.     <!--昵称输入框-->
  5.     <div>
  6.       <label for="name">昵称:</label>
  7.       <input
  8.         type="text"
  9.         name="name"
  10.         id="name"
  11.         maxlength="8"
  12.         placeholder="请输入您的昵称"
  13.         autofocus
  14.         required
  15.       />
  16.     </div>
  17.     <!--头像图片上传-->
  18.     <div>
  19.       <label for="p_picture">头像:</label>
  20.       <input
  21.         type="file"
  22.         name="p_picture"
  23.         id="p_picture"
  24.         formenctype="multipart/form-data"
  25.       />
  26.     </div>
  27.     <!--性别选项单选按钮-->
  28.     <div>
  29.       <label for="secrecy">性别:</label>
  30.       <input type="radio" name="sex" id="male" value="male" />
  31.       <label for="male">男</label>
  32.       <input type="radio" name="sex" id="female" value="female" />
  33.       <label for="female">女</label>
  34.       <input type="radio" name="sex" id="secrecy" value="secrecy" checked />
  35.       <label for="secrecy">保密</label>
  36.     </div>
  37.     <!--城市地点下拉选择列表-->
  38.     <div>
  39.       <label>城市:</label>
  40.       <input name="city" list="city" />
  41.       <datalist id="city">
  42.         <option value="北京" selected> </option>
  43.         <option value="上海"> </option>
  44.         <option value="广州"> </option>
  45.         <option value="深圳"> </option>
  46.       </datalist>
  47.     </div>
  48.     <!--生日日期控件-->
  49.     <div>
  50.       <label for="birthday">生日:</label>
  51.       <input type="date" name="birthday" id="birthday" />
  52.     </div>
  53.     <!--手机号码输入框-->
  54.     <div>
  55.       <label for="p_number">手机号码:</label>
  56.       <input
  57.         type="text"
  58.         maxlength="11"
  59.         name="p_number"
  60.         id="p_number"
  61.         placeholder="请输入您的手机号码"
  62.       />
  63.     </div>
  64.     <!--邮箱地址输入框-->
  65.     <div>
  66.       <label for="email">邮箱:</label>
  67.       <input
  68.         type="email"
  69.         name="email"
  70.         id="email"
  71.         placeholder="请输入您的邮箱地址"
  72.         style="margin-left: 32px;"
  73.       />
  74.     </div>
  75.     <!--爱好选项复选框-->
  76.     <div>
  77.       <label for="programme">爱好:</label>
  78.       <input type="checkbox" name="hobby[]" id="read_book" value="read_book" />
  79.       <label for="read_book">读书</label>
  80.       <input
  81.         type="checkbox"
  82.         name="hobby[]"
  83.         id="play_basketball"
  84.         value="play_basketball"
  85.       />
  86.       <label for="play_basketball">打篮球</label>
  87.       <input
  88.         type="checkbox"
  89.         name="hobby[]"
  90.         id="play_c_game"
  91.         value="play_c_game"
  92.       />
  93.       <label for="play_c_game">玩网游</label>
  94.       <input
  95.         type="checkbox"
  96.         name="hobby[]"
  97.         id="programme"
  98.         value="programme"
  99.         checked
  100.       />
  101.       <label for="programme">编程</label>
  102.     </div>
  103.     <!--个性签名多行文本域-->
  104.     <div>
  105.       <label for="introduction">个性签名:</label>
  106.       <textarea
  107.         name="introduction"
  108.         id="introduction"
  109.         cols="40"
  110.         rows="10"
  111.         placeholder="请设置您的个性签名"
  112.       ></textarea>
  113.     </div>
  114.     <!--提交和重置按钮-->
  115.     <div>
  116.       <button
  117.         type="submit"
  118.         form="setup"
  119.         formaction="setup.php"
  120.         formmethod="POST"
  121.         formenctype="application/x-www-form-urlencoded"
  122.         formtarget="_self"
  123.       >
  124.         设置
  125.       </button>
  126.       <button type="reset" form="setup">重置</button>
  127.     </div>
  128.   </fieldset>
  129. </form>

五、其他要点

1. GET 和 POST 的区别

序号 项 描述
1 参数位置 GET 请求的参数是放在 URL 里的；POST 请求参数是放在请求 body 里的
2 参数大小 GET 请求参数受限于浏览器 url 长度限制，一般不超过 2048 个字符；POST 由于不是通过 URL 传值，理论上数据不受 限。但实际各个 WEB 服务器会规定对 post 提交数据大小进行限制
3 参数内容 GET 请求的参数只能是 ASCII 码，所以中文需要 URL 编码，而 POST 请求传参没有这个限制
4 数据接收 GET 只接受一次；POST 可根据数据大小，分多次接受
5 安全性 GET 产生的 URL 可以收藏为书签，参数保留在浏览器历史里；POST 则不可以被收藏，参数也不会在浏览器历史里保留
6 后退机制 GET 在浏览器回退时是无害的，而 POST 会再次提交请求
7 缓存机制 GET 请求会被浏览器主动 cache，而 POST 不会，除非手动设置受
8 适用场景 GET 从服务器端获取数据，不做增删改，适用于搜索；POST 向服务器提交数据，如做增删改操作

2. php 获取 checkbox 的值

  • 因为前端 html 复选框可以同时选择多个值，而后端 php 必须以二维数组形式来同时获取复选框的多个值，所以 checkbox 的 name 属性必须设置类似 hobby[]形式的值，否则不能正确获取到 checkbox 复选框的值。

六、课程总结

  • 今天学习了 HTML 中常用的标签，通过上课认真听讲和认真完成老师布置的作业，使得我对 HTML 的理解和运用更加深入和熟悉。最主要的知识点是明白了表单在网站开发中的重要性，以及了解并熟悉了各种类型的表单的用法。

七、作业的公网链接

公网链接

上一条：css基础知识、css介绍、css元素与元素框、css元素的显示方式、css的引用、媒体查询下一条：利用媒体查询实现自适应导航
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多