简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > html表单基础实战
Blogger Information
Blog 9
fans 0
comment 0
visits 3926
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html表单基础实战
靠近你深拥你
Original
490 people have browsed it

表单基础

在html中，通常把form标签称为表单
表单不会对页面样式产生任何影响，但它会影响页面的行为
它可以将表单中的数据，使用指定的请求方式（get或post），提交到指定的服务器地址。

1. 表单的基本构造

<form>标签用于创建供用户输入的 HTML 表单，我们也必须要把所有表单标签放在form标签内部。

  • 语法
    1. <form>
    2.   <!--各种表单元素-->
    3. </form>

  • 举例

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>表单基础</title>
    8. </head>
    9. <body>
    10.   <form>
    11.       <div>
    12.           <label for="name">用户名</label>
    13.           <input type="text" id="name" />
    14.       </div>
    15.   </form>
    16. </body>
    17. </html>

    2. 常用表单元素

  • <fieldset>表单控件的分组
    • <legend> 标签为 <fieldset> 元素定义标题。
  • <label>标签为 input 元素定义标注（标记）。

    元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

    注意：<label> 标签的 for 属性应当与相关元素的 id 属性相同。
  • <input>标签规定了用户可以在其中输入数据的输入字段。

    用来声明允许用户输入数据的 input 控件。输入字段可通过多种方式改变，取决于 type 属性。

  • <select>元素用来创建下拉列表。
  • <option>标签定义下拉列表中的一个选项。
  • <optgroup>标签经常用于把相关的选项组合在一起。
  • <textarea>标签定义一个多行的文本输入控件。
    • 文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
    • 可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。
  • <button>标签定义一个按钮。

    元素内部，您可以放置内容，比如文本或图像。这是该元素与使用<input> 元素创建的按钮之间的不同之处。

3. 表单元素常用属性

属性名称 所诉元素 属性说明
action <form> 处理表单数据的脚本
method <form> 表单的提交方式, get(默认),post
for <label> 绑定相关元素的id
placeholder <input> placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。
selected <option> 默认选中
checked <input type="radio" />、<input type="checkbox" > 默认选中
value 通用 定义送往服务器的选项值。
autofocus 通用 页面初始化/加载成功时,焦点自动落入
required 通用 必填项, 不写不能提交。注释（只有名称没有值的属性叫:布尔属性(只要写上就是true,不写就是false) ）
disabled 通用 禁用
id 通用 规定元素的唯一 id
class 通用 规定元素的类名（classname）
style 通用 定元素的行内样式（inline style）
name 通用 name是提交互服务器上的变量名
type <input>、<button> 规定元素的类型

4. <input>元素type类型

类型名称 类型说明
button 定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
checkbox 定义复选框。
colorNew 定义拾色器
dateNew 定义 date 控件（包括年、月、日，不包括时间）。
datetimeNew 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-localNew 定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
emailNew 定义用于 e-mail 地址的字段。
file 定义文件选择字段和 “浏览…” 按钮，供文件上传。
hidden 定义隐藏输入字段。
image 定义图像作为提交按钮。
monthNew 定义 month 和 year 控件（不带时区）。
numberNew 定义用于输入数字的字段。
password 定义密码字段（字段中的字符会被遮蔽）。
radio 定义单选按钮。
rangeNew 定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
reset 定义重置按钮（重置所有的表单值为默认值）。
searchNew 定义用于输入搜索字符串的文本字段。
submit 定义提交按钮。
telNew 定义用于输入电话号码的字段。
text 默认。定义一个单行的文本字段（默认宽度为 20 个字符）。
timeNew 定义用于输入时间的控件（不带时区）。
urlNew 定义用于输入 URL 的字段。
weekNew 定义 week 和 year 控件（不带时区）

5. <button>type类型

类型名称 类型说明
submit 提交按钮
button 可点击的按钮
reset 重置按钮（清除表单数据）。

6. 实例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>表单基础</title>
  8.     <style>
  9.         form{
  10.             width: 40%;
  11.             margin: 0 auto;
  12.         }
  13.         form div{
  14.             width: 80%;
  15.             margin: 10px auto;
  16.         }   input[type="text"],input[type="password"],input[type="email"]{
  17.             width: 80%;
  18.         }
  19.         button{
  20.             width: 100%;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <form>
  26.         <fieldset>
  27.             <legend>用户注册</legend>
  28.             <div>
  29.                 <label for="uname">用户名：</label>
  30.                 <input type="text" placeholder="用户名不能少于6位，且只能以英文字母开头" id="uname" name="username" autofocus required>
  31.             </div>
  32.             <div>
  33.                 <labe for="email">邮&nbsp;&nbsp;&nbsp;箱：</label>
  34.                 <input type="email" name="email" id="email" placeholder="admin@admin.com" required>
  35.             </div>
  36.             <div>
  37.                 <label for="pwd">密&nbsp;&nbsp;&nbsp;码：</label>
  38.                 <input type="password" name="password" id="pwd" required placeholder="密码必须包含大小写以及数字，且不小于8位" />
  39.             </div>
  40.             <div>
  41.                 <label for="age">年&nbsp;&nbsp;&nbsp;龄：</label>
  42.                 <input type="number" id="age" name="age" min="18" max="120" />
  43.             </div>
  44.             <div>
  45.                 <label for="birthday">生&nbsp;&nbsp;&nbsp;日：</label>
  46.                 <input type="date" id="birthday" value="1997-11-05" name="birthday" min="1949-10-01" />
  47.             </div>
  49.             <div >
  50.                 <label for="male">性&nbsp;&nbsp;&nbsp;别:</label>
  51.                 <input type="radio" name="sex" value="male" id="male" checked /><label for="male">男</label>
  52.                 <input type="radio" name="sex" value="female" id="female" /><label for="female">女</label>
  53.                 <input type="radio" name="sex" value="secret" id="secret" /><label for="secret">保密</label>
  54.             </div>
  56.             <div>
  57.                 <label>爱好:</label>
  58.                 <input type="checkbox" name="hobby[]" value="trave" id="trave" /><label for="trave">旅游</label>
  59.                 <input checked type="checkbox" name="hobby[]" value="program" id="programe" /><label for="program"
  60.                   >编程</label
  61.                 >
  62.                 <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /><label for="shoot">摄影</label>
  63.                 <input checked type="checkbox" name="hobby[]" value="game" id="game" /><label for="game">游戏</label>
  64.             </div>
  66.             <div>
  67.                 <label for="">学历:</label>
  68.                 <select name="edu" id="">
  69.                   <option value="1">中学</option>
  70.                   <option value="2" selected>大学</option>
  71.                   <option value="2">大学</option>
  72.                   <option value="3">博士</option>
  73.                 </select>
  74.               </div>
  75.               <div>
  76.                 <button>提交</button>
  77.               </div>
  78.         </fieldset>
  79.     </form>
  80. </body>
  81. </html>
  • 实列效果截图
    实例效果图

    7. 注意事项

    1. radio中的 name 必须全部相同,因为name是提交互服务器上的变量名,只有全部相同,才能保证数据的唯一性。
    2. checkbox中name全部相同,只会返回一个值,而复选框必须返回多个值,哪怕没有值,也是一个空集合，将name的名称后面加上 [],写成数组的语法。
    3. 下拉列表: 从一组预置的值选择一个或多个返回，所以,变量的名称与值不在同一个元素上。名称绑定在<selected>上，值在<option>z中。
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！