1、创建表单

基本语法


name：设置表单名称
method：设置表单的提交方式。常用“post”或“get”
action：设置表单提交地址
enctype：设置表单数据的编码方式

功能

标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单用于向服务器传输数据。

代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5. </head>
  6. <body>
  7.     <form action="http://www.baidu.com" method="get">
  8.         姓名：<input type="text" value="小李" /><br />
  9.         密码：<input type="password" value="123123" /><br />
  10.     </form>
  11. </body>
  12. </html>

表单 - 图10 代码讲解

1、添加一个表单

使用

添加一个表单，表单用于向服务器传输数据。

2、action 属性

规定当提交表单时向何处发送表单数据。
URL可以使绝对路径，也可以是相对路径
绝对 URL - 指向其他站点
相对 URL - 指向站点内的文件

3、method 属性

规定用于发送 表番 的 HTTP 方法。
有两种：post、get。

2、表单元素

（1) 标签


type：指定input标签的类型
name：设置标签的名称
size：设置标签的宽度
value：设置标签的内容
maxlength：设置标签内容的字符的最大长度
placeholder：设置标签的提示信息
checked：设置标签首次加载时是否被选中
readonly：设置标签内容为只读
disabled：设置标签是否被禁用

1）输入类型：text

基本语法

功能

定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8" />
  5. </head>
  6. <body>
  7.     姓名：<input type="text" value="小李" />
  8. </body>
  9. </html>

表单 - 图11 代码讲解

1、添加一个文本输入框

2、type 属性
type 属性规定 input 元素的类型
3、value 属性
规定 input 元素中的默认值。
4、name 属性
规定 input 元素的名称，
用于对提交到服务器后的表单数据进行标识。

2）输入类型：password

基本语法

功能

定义密码字段。该字段中的字符被掩码。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    密码：<input type="password" value="123456" />
</body>
</html>

表单 - 图12 代码讲解

1、添加一个密码输入框

2、type 属性
type 属性规定 input 元素的类型
3、value 属性
规定 input 元素中的默认值。
4、name 属性
规定 input 元素的名称，
用于对提交到服务器后的表单数据进行标识。

3）单选按钮 radio

基本语法

男
女

功能

定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。
注：单选按钮 radio，必须有name 属性并且 name 必须保持一致。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    性 别：
    <input type="radio" name="sex" checked="checked" />男 //男按钮默认被选中
    <input type="radio" name="sex" />女
</body>
</html>

表单 - 图13 代码讲解

1、添加一个单选按钮
男
女
2、checked属性
规定此 input 元素首次加载时默认选中。
3、name 属性
规定 input 元素的名称，用于对提交到服务器后的表单数据进行标识。
单选按钮必须有name 属性并且 name 必须保持一致。

4）复选框 checkbox

基本语法

功能

定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    爱好：
    <input type="checkbox" name="hobbey" checked="checked" />足球
    <input type="checkbox" name="hobbey" />篮球
    <input type="checkbox" name="hobbey" />羽毛球
    <input type="checkbox" name="hobbey" checked="checked" />乒乓球
</body>
</html>

表单 - 图14 代码讲解

1、添加多个复选框
足球
篮球
羽毛球
乒乓球
2、checked属性
规定此 input 元素首次加载时默认选中。
3、name 属性
规定 input 元素的名称，用于对提交到服务器后的表单数据进行标识。
复选必须有name 属性并且 name 必须保持一致。

5）点击按钮button

基本语法

功能

定义可点击的按钮，但没有任何行为。button 类型常用于在用户点击。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    点击按钮：
    <input type="button" value="按钮" />
</body>
</html>

表单 - 图15 代码讲解

1、添加一个点击按钮

2、value 属性
设置元素默认值。

6）重置按钮 reset

基本语法

功能

定义重置按钮。重置按钮会清除表单中的所有数据。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    <form action="" method="get">
        姓名：<input type="text" value="小李" /><br />
        点击按钮：<input type="reset" />
    </form>
</body>
</html>

表单 - 图16 代码讲解

1、添加一个重置按钮

重置按钮会清除表单中的所有数据。
2、重置按钮的使用
重置按钮需要配合表单来使用，如果没有表单

重置不起作用。

7）提交按钮 submit

基本语法

功能

定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    <form action="" method="get">
        姓名：<input type="text" value="小李" /><br />
        点击按钮：<input type="submit" />
    </form>
</body>
</html>

表单 - 图17 代码讲解

1、添加一个提交按钮

2、提交按钮的使用
提交按钮需要配合表单来使用。
提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

8）文件上传 file

基本语法

功能

用于文件上传。

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    头像：<input type="file" name="shangchuan" />
</body>
</html>

表单 - 图18 代码讲解

1、创建一个上传文件

用于文件上传。
2、name 属性
用于对提交到服务器后的表单数据进行标识。

（2）

功能

元素用来创建下拉列表。
元素中的

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
</head>
<body>
    年龄：
    <select name="age">       //<select name="age" size="2">就显示两个选项，通过滚动条显示其他选项
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20" selected="selected">20</option>    //默认选中这个选项
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
    </select>
</body>
</html>

表单 - 图19 代码讲解

1、添加一个下拉框


cols （列）和 rows （行）属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

功能

定义多行的文本输入控件。
文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体。

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<textarea cols="40" rows="10">这是textarea</textarea>
</body>
</html>

表单 - 图20 代码讲解

1、添加一个文本输入框

使用 标签添加文本输入框。

2、cols 属性

规定文本区域内可见的宽度。

3、rows 属性

规定文本区域内可见的行数。

3、表单元素样式

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
      body{
        text-align:center;
      }
      .txt1{
        width:1000px;
        height:30px;
        font-size:20px;
        color:yellow;
        text-align:right;
        padding-right:20px;
        border:1px solid orange;
        border-radius:8px;
        background-color:lightgreen;
      }
</style>
</head>
<body> 
<input type="text" name="userName" class="txt1" />
</body>
</html>

表单 - 图21 代码讲解

1、标签样式
.txt1{
width:1000px;
height:30px;
font-size:20px;
color:yellow;
text-align:right;
padding-right:20px;
border:1px solid orange;
border-radius:8px;
background-color:lightgreen;
}
width:1000px; 设置input文本输入框的宽度为1000像素
height:30px; 设置input文本输入框的高度为30像素
font-size:20px; 设置input文本输入框的文字大小为20像素
color:yellow; 设置input文本输入框的字体颜色为黄色
text-align:right; 设置input文本输入框的文本距中显示
padding-right:20px; 设置input文本输入框的右内边距为20像素
border:1px solid orange; 设置input文本输入框的边框为1像素的桔色实线
border-radius:8px; 设置input文本输入框的圆角为8像素
background-color:lightgreen; 设置input文本输入框的背景色为绿色