1.前后端存在数据交互时,前端使用form表单
2.form表单提交数据的【注意事项】
1. 所有获取用户输入的标签都必须放在form表单里面
2. action控制着往哪儿提交 <form action=""></form>
3. input\select\textarea 都需要有name属性和value属性,这些对应着后端对数据的存储 {key="标签属性name的值":value="标签属性value的值"}
4. 表单数据提交使用 submit提交按钮 <input type="submit">,千万不要写成普通的button按钮<input type="button">
5.当用form表单提交数据时,注意必须配置两个属性 methond="post" enctype="multipart/form-data" 或 "application/x-www-form-urlencoded"
3.认识类型不同的input标签 <input id="xx" name="xx" type="xxx" value="xx">
text单行文本框
password 密码框
radio 单选框
checkbox 多选(复选)框
date 日期框
datetime 时间框
file 文件框
button 普通按钮,多用JS给它绑定事件
reset 重置按钮
submit 提交按钮
4.借助HTML代码全面认识form标签
1 <!DOCTYPE html>
2 <html lang="ch-zn">
3 <head>
4 <meta charset="UTF-8">
5 <title>注册</title>
6 </head>
7 <body>
8 <!--form表单常见属性的说明-->
9 <!--action 表单提交的地址URL-->
10 <!--enctype 提交数据的编码 默认使用application/x-www-form-urlencoded 当表单中有文件时 需要分段传送 multipart/form-data-->
11 <!--autocomplete 自动补全 默认是on开启的 其效果是文本框输入时 历史输入记录存在 有助于再次迅速填写表单-->
12 <!--novalidate 浏览器不验证表单 举例 邮箱格式验证-->
13 <!--target action属性中地址的目标 默认为-self -->
14
15 <form action="" method="post" enctype="multipart/form-data" autocomplete="on" >
16 <p>
17 <label for="n1">示范1 属性placeholder 占位符效果 </label>
18 <!--注意placeholder 不是value值-->
19 <input id="n1" name="ame" type="text" placeholder="金龙鱼大米">京东搜索
20 </p>
21 <p>
22 <label for="n2">示范2 只读属性readonly 默认值属性value </label>
23 <input id="n2" name="name" type="text" value="小强" readonly>
24 </p>
25 <p>
26 <label for="n3">示范3 属性禁用disabled</label>
27 <input id="n3" name="ame" type="text" value="杨杨" disabled>
28 </p>
29
30 <!--文本框历史输入记录不显示 可以关闭form表单的属性autocomplete 其值默认为on-->
31 <p>单行输入框 nput-text 名称:<input id="n4" name="userName" type="text"></p>
32
33 <p>密码输入框 input-password 密码:<input name="userPassword" type="password"></p>
34
35 <!--对邮箱输入格式不进行教育 则对form表单添加 novalidate 属性-->
36 <p>邮箱 input-email:<input name="" type="email">
37
38 <p>生日 input-date:<input name="birthday" type="date"></p>
39 <p>月份 input-month:<input name="month" type="month"></p>
40 <p>时间 input-time:<input name="time" type="time"></p>
41
42 <!--什么时候使用 input文本输入框使用type="hidden"属性呢?-->
43 <!--数据表的索引值 不希望被用户修改 又是用户依据索引值 操作对应数据的基础 举例:学生ID 学生姓名 学生年龄 学生成绩 这个ID就需要在表单上隐藏起来-->
44 <p>隐藏文本 input-hidden:<input name="hidden" type="hidden"></p>
45
46 <p>文件选择框 input-file:<input name="tx" type="file"></p>
47
48 <p>单选框 input-radio 性别 写法不规范 只点击文本'男''女' 是无法选中圆圈按钮的:
49 <input name="gender" type="radio" value="1">男
50 <input name="gender" type="radio" value="0">女
51 <input checked name="gender" type="radio" value="2">保密
52 </p>
53
54 <p>单选框 input-radio 性格 借助label-for="id"标签与input标签的捆绑 :
55 <!--规范了input标签的文本说明 点击文本'活泼''沉默' 就可以实现圆圈按钮的选择-->
56 <label for="x1">活泼</label>
57 <input id="x1" name="xingge" type="radio" value="A">
58
59 <label for="x2">沉默</label>
60 <input id="x2" name="xingge" type="radio" value="B">
61
62 <label for="x3">呆板</label>
63 <input id="x3" name="xingge" type="radio" value="C">
64 </p>
65
66 <p>复选框 input-checkbox 属性checked 默认被勾选:
67 <input name="hobby" type="checkbox" value="football">足球
68 <input name="hobby" type="checkbox" value="basketball">蓝球
69 <input checked name="hobby" type="checkbox" value="doublecolorball">双色球
70 </p>
71
72
73 <!--多行文本 textarea 的属性 行数rows 列数cols-->
74 <p>多行文本 textarea:<textarea name="info" id="id_info" cols="80" rows="3"></textarea></p>
75
76
77 <p>下拉选择 季节 select>option 属性selected 默认被选中:
78 <select name="se" id="c1">
79 <option value="1">春季</option>
80 <option selected value="2">夏季</option>
81 <option value="3">秋季</option>
82 <option value="4">冬季</option>
83 </select>
84 </p>
85
86 <p>multiple属性 多选下拉选择 课程 select>option:
87 <select name="class" id="c2" multiple>
88 <option selected value="java">JAVA</option>
89 <option selected value="python">PYTHON</option>
90 <option value="c">C语言</option>
91 <option value="javascript">JavaScript</option>
92 </select>
93 </p>
94
95 <p>二级下拉选择框 省份 select>optgroup-label>option:
96 <select name="from" id="">
97 <optgroup label="东北">
98 <option value="liao">辽宁</option>
99 <option value="ji">吉林</option>
100 <option value="hei">黑龙江</option>
101 </optgroup>
102 <optgroup label="华东">
103 <option value="liao">南京</option>
104 <option value="ji">无锡</option>
105 <option value="hei">苏州</option>
106 </optgroup>
107 </select>
108 </p>
109
110
111 <p>提交按钮 input-submit:<input type="submit" value="我要提交"></p>
112 <p>提交按钮 input-submit:<input type="submit" value="完成">请点击完成进行提交</p>
113
114 <p>普通按钮 input-button 不发生提交 常用于javascript事件的绑定 :<input type="button" value="button"></p>
115
116 <p>重置按钮 input-reset 应用于清空恢复原状态 :<input type="reset" value="reset"></p>
117
118
119 </form>
120
121 </body>
122 </html>