HTML表单

HTML 表单用于搜集不同类型的用户输入

一、语法：

<form>
    表单元素
</form>

注意：表单本身不可见。

二、在HTML标签中，以下标签实现表单元素的添加

标签 描述
< input> 表单输入标签
< select> 菜单和列表标签
< option> 菜单和列表项目标签
< textarea > 文字域标签
< optgroup> 菜单和列表项目分组标签

 

 

 

 

 

 

 

 

下面我们来创建一个基础的表单

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>基础表单</title>
 6 </head>
 7 <body>
 8     <form>
 9         姓名：<input type="text" name="username">
10         密码：<input type="password" name="paw">
11         <input type="submit">
12     </form>
13 </body>
14 </html>

这是一个最基础的表单，我们可以发现<input>标签有很多作用。

三、<input>标签

改变Type值,<input>标签的用法就不一样了

Type属性值 描述
text 文字域
password 密码域
file 文件域
checkbox 复选域
radio 单选域
Button 按钮
Submit
提交按钮
Reset
重置按钮
Hidden 隐藏域
image 图像域

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

四、<select>标签

 属性  描述
 name  设置下拉菜单和列表的名称
 multiple  设置可选择多个选项
 size  设置列表中可见选项的数目

 

 

 

 

 

 

 

演示代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表单</title>
 6 </head>
 7 <body>
 8     <hr>
 9     <form action="">
10         <table>
11             <tr>
12                 <td>下拉菜单：</td>
13             </tr>
14             <tr>
15                 <td>
16                 <select name="dw" id="">
17                     <option value="dw1">熊猫</option>
18                     <option value="dw2">猫</option>
19                     <option value="dw3">狗</option>
20                     <option value="dw4">猪</option>
21                     <option value="dw5">猴子</option>
22                 </select>
23                 </td>
24             </tr>
25             <tr>
26                 <td>列表：</td>
27             </tr>
28             <tr>
29                 <td>
30                     <select name="sg" size="3" multiple>
31                     <option value="sg1">苹果</option>
32                     <option value="sg2">香蕉</option>
33                     <option value="sg3">橙子</option>
34                     <option value="sg4">梨</option>
35                     <option value="sg5">桃</option>
36                 </select>
37                 </td>
38             </tr>
39         </table>
40     </form>
41 </body>
42 </html>

效果图

五、单行文本域

属性 描述
Name 文字域的名称
Maxlength 指用户输入的最大字符长度
Size 指定文本框的宽度,以字符个数为单位;文本框的缺省宽反是20个字符
value 指定文本框的默认值
placeholder
规定用户填写输入字段的提示

 

 

 

 

 

 

 

 

六、多行文本域<textarea>

属性 描述
name 设置文本区的名称
placeholder 设置描述文本区域预期值的简短提示
rows 设置文本区内的可见行数
cols 设置文本区内的可见宽度

 

 

 

 

 

 

 

演示代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form action="">
        请作自我介绍：
        <br>
        <textarea name="jj" rows="3" cols="20" placeholder="请在此处介绍自己..."></textarea>
    </form>
</body>
</html>

效果图

七、<form>标签

属性 值 描述
action URL 提交表单时向何处发送表单数据
method

get、post

 设置表单以何种方式发送到指定页面
name form_name 表单的名称
target _blank、_self
_parent、 _top		 在何处打开action URL
enctype
application/x-www-form-urlencoded
multipart/form-data
text/plain
 在发送表单数据之前如何对其进行编码
 

 

 

 

 

 

 

 

 

 

 

 

 

八、文件传输的方式——get和post

get:

  • 使用URL传递参数
  • 对所发送信息的数量也有限制
  • 一般用于信息获取


post:

  • 表单数据作为HTTP请求体的一部分
  • 对所发送信息的数量无限制
  • 一般用于修改服务器上的资源

 

posted @ 2020-07-24 14:59  雪中加点糖  阅读(163)  评论(0)    收藏  举报