首页 > 博客列表 > html表单基础实战

博主信息

博文 9

粉丝 0

访问量 6184

专题推荐

更多>

表单基础

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

1. 表单的基本构造

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

语法

<form>
  <!--各种表单元素-->
</form>

举例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表单基础</title>
</head>
<body>
  <form>
      <div>
          <label for="name">用户名</label>
          <input type="text" id="name" />
      </div>
  </form>
</body>
</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. 实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单基础</title>
    <style>
        form{
            width: 40%;
            margin: 0 auto;
        }
        form div{
            width: 80%;
            margin: 10px auto;
        }   input[type="text"],input[type="password"],input[type="email"]{
            width: 80%;
        }
        button{
            width: 100%;
        }
    </style>
</head>
<body>
    <form>
        <fieldset>
            <legend>用户注册</legend>
            <div>
                <label for="uname">用户名：</label>
                <input type="text" placeholder="用户名不能少于6位，且只能以英文字母开头" id="uname" name="username" autofocus required>
            </div>
            <div>
                <labe for="email">邮&nbsp;&nbsp;&nbsp;箱：</label>
                <input type="email" name="email" id="email" placeholder="admin@admin.com" required>
            </div>
            <div>
                <label for="pwd">密&nbsp;&nbsp;&nbsp;码：</label>
                <input type="password" name="password" id="pwd" required placeholder="密码必须包含大小写以及数字，且不小于8位" />
            </div>
            <div>
                <label for="age">年&nbsp;&nbsp;&nbsp;龄：</label>
                <input type="number" id="age" name="age" min="18" max="120" />
            </div>
            <div>
                <label for="birthday">生&nbsp;&nbsp;&nbsp;日：</label>
                <input type="date" id="birthday" value="1997-11-05" name="birthday" min="1949-10-01" />
            </div>
            <div >
                <label for="male">性&nbsp;&nbsp;&nbsp;别:</label>
                <input type="radio" name="sex" value="male" id="male" checked /><label for="male">男</label>
                <input type="radio" name="sex" value="female" id="female" /><label for="female">女</label>
                <input type="radio" name="sex" value="secret" id="secret" /><label for="secret">保密</label>
            </div>
            <div>
                <label>爱好:</label>
                <input type="checkbox" name="hobby[]" value="trave" id="trave" /><label for="trave">旅游</label>
                <input checked type="checkbox" name="hobby[]" value="program" id="programe" /><label for="program"
                  >编程</label
                >
                <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /><label for="shoot">摄影</label>
                <input checked type="checkbox" name="hobby[]" value="game" id="game" /><label for="game">游戏</label>
            </div>
            <div>
                <label for="">学历:</label>
                <select name="edu" id="">
                  <option value="1">中学</option>
                  <option value="2" selected>大学</option>
                  <option value="2">大学</option>
                  <option value="3">博士</option>
                </select>
              </div>
              <div>
                <button>提交</button>
              </div>
        </fieldset>
    </form>
</body>
</html>

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

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

chrome安装以及插件的安装

2023-03-09 23:05:37

表单基础

1. 表单的基本构造

2. 常用表单元素

`<fieldset>`表单控件的分组

`<label>`标签为 input 元素定义标注（标记）。

注意：`<label>` 标签的 for 属性应当与相关元素的 id 属性相同。

`<input>`标签规定了用户可以在其中输入数据的输入字段。

`<select>`元素用来创建下拉列表。

`<option>`标签定义下拉列表中的一个选项。

`<optgroup>`标签经常用于把相关的选项组合在一起。

`<textarea>`标签定义一个多行的文本输入控件。

`<button>`标签定义一个按钮。

3. 表单元素常用属性

4. `<input>`元素type类型

5. `<button>`type类型

6. 实例代码

实列效果截图

7. 注意事项

表单基础

1. 表单的基本构造

2. 常用表单元素

<fieldset>表单控件的分组

<label>标签为 input 元素定义标注（标记）。

注意：<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<input>标签规定了用户可以在其中输入数据的输入字段。

<select>元素用来创建下拉列表。

<option>标签定义下拉列表中的一个选项。

<optgroup>标签经常用于把相关的选项组合在一起。

<textarea>标签定义一个多行的文本输入控件。

<button>标签定义一个按钮。

3. 表单元素常用属性

4. <input>元素type类型

5. <button>type类型

6. 实例代码

实列效果截图

7. 注意事项

`<fieldset>`表单控件的分组

`<label>`标签为 input 元素定义标注（标记）。

注意：`<label>` 标签的 for 属性应当与相关元素的 id 属性相同。

`<input>`标签规定了用户可以在其中输入数据的输入字段。

`<select>`元素用来创建下拉列表。

`<option>`标签定义下拉列表中的一个选项。

`<optgroup>`标签经常用于把相关的选项组合在一起。

`<textarea>`标签定义一个多行的文本输入控件。

`<button>`标签定义一个按钮。

4. `<input>`元素type类型

5. `<button>`type类型