内容：
<!DOCTYPE html>
<!-- 使用表单标签，与用户交互 - 使用<form>创建表单 -->
<html>
<head>
<meta charset="UTF-8">
<title>表单学习</title>
</head>
<body>
<h3>第一个表单</h3>
<!-- <form>标签是成对出现的，以<form>开始，以</form>结束
action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)
method ： 数据传送的方式（get/post） -->
<form action="form/a.asp" method="get">
请输入姓名：<br>
<input type="text" name="name" value="account">
<br><br>
请输入密码：<br>
<input type="text" name="key" value="accountkey">
<br><br>
<input type="submit" name="submit" value="提交">
<input type="reset">
</form>
<p>点击提交，表单数据会被发送到名为 a.asp 的页面</p>
<hr>
<h3>---表单标签类型解析---</h3>
<form action="">
<form action="form/a.asp" method="get">
<!-- input标签对
type：规定input元素的类型，可取：
1.button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
2.checkbox 定义复选框
3.file 定义输入字段和 "浏览"按钮，供文件上传
4.hidden 定义隐藏的输入字段
5.image 定义图像形式的提交按钮
6.password 定义密码自选，该字段中字符被掩码
7.radio 定义单选按钮
8.reset 定义重置按钮。重置按钮会清除表单中的所有数据
9.submit 定义提交按钮。提交按钮会把表单数据发送到服务器
10.text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符
name：规定 input 元素的名称
value：value 属性为 input 元素设定值
注意：type是checkbox或radio时，必须设置 value 属性
注意：type是file时，value无法与其同时存在
1 -->
<p>input 标签 type="text"</p>
<input type="text" name="name" value="account">
<p>input 标签 type="password"</p>
<input type="password" name="key" value="accountkey">
<p>input 标签 type="submit"</p>
<input type="submit" name="submit" value="提交">
<p>input 标签 type="reset"</p>
<input type="reset">
<p>input 标签 type="button"</p>
<input type="button" value="button点击">
<p>input 标签 type="checkbox"</p>
<input type="checkbox" name="CB" id="what">
<p>input 标签 type="hidden"</p>
<input type="hidden" name="藏起来">
<p>input 标签 type="file"</p>
<input type="file" name="hhh" id="kkk">
<p>input 标签 type="radio"</p>
<input type="radio">
<p>input 标签 type="image"</p>
<input type="image">
<!-- 按鼠标增加或减少数值 -->
<p>input 标签 type="number"</p>
<input type="number">
<!-- 数字框的值需以http://或者https://开头,且后面必须有内容,否则表单提交的时候会报错误提示 -->
<p>input 标签的 type="url"</p>
<input type="url">
<!-- 框内可以鉴别是否是邮箱类型，没有@就会报错，@后面没内容也会保持 -->
<!-- 如果在浏览器中有保存过自己的邮箱，点击输入框，保存过的邮箱会弹出 -->
<p>input 标签的 type="email"</p>
<input type="email">
</form>
<hr>
</body>
</html>
效果：
学习：html5+css3：https://www.imooc.com/learn/9
扫一扫
2503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
