1.表单标签 及 表单属性
·表单标签是 ：<form>
·表单属性有：action 和 method；
·action属性：规定向何处发送表单数据。
·method属性：规定用什么方法发送数据。（get和post）
get:在发送的url后面拼接表单数据，明文显示表单数据的内容，url的长度有限制。
post：在消息体/请求体中传递，参数大小无限制。
2.表单项 及 属性
表单标签中常包括三种表单项标签：input、select、textarea
·input：定义表单项，通过type属性控制输入
type属性的值有：
① text：默认值，定义单行的输入字段
② password：定义密码字段
③ radio：单选按钮,name属性相同表示在一个备选圈中，value属性不同，表示各自的选项;如果最外层嵌套label标签，这样不用精准点击方格，点击文字部分也可选中
④ checkbox：复选
⑤ file：文件上传
⑥ data/time/datatime-local：定义日期、时间、日期和时间
⑦ number：数字输入框
⑧ email：邮件输入框
⑨ hidden：隐藏域
⑩ submit/reset/button：提交、重置、可点击按钮，value属性的值会展示在按钮上-------------------------------------------------------------------------------------------------------------------------
·select：下拉列表，标签 option 定义列表项
形式写法：
-------------------------------------------------------------------------------------------------------------------------
·textarea：定义文本域
常见属性的值有：cols和row
① cols:一行最多有几个字符
② rows:默认可以写几行
3.表单效果展示：
<table action="" methods="get">
<h1 style="text-align: center;">基础信息表</h1>
姓名：<input type="text" name="name"> <br>
密码：<input type="password" name="password"> <br>
性别：<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女 <br>
爱好： <label><input type="checkbox" name="love" value="1"> 唱歌</label>
<label><input type="checkbox" name="love" value="2"> 跳舞</label>
<label><input type="checkbox" name="love" value="3"> 绘画</label> <br>
上传简历pdf：<input type="file"> <br>
选择日期 和 时间：<input type="datetime-local"><br>
年龄：<input type="number"><br>
邮件：<input type="email"><br>
学历：<select name="degree">
<option value="1">-----下拉选择学历-----</option>
<option value="2">高中</option>
<option value="3">本科</option>
<option value="4">研究生</option>
</select><br>
其他留言：<textarea cols="30" rows="6"></textarea><br><br>
<input type="button" name="button" value="按钮">
<input type="reset" name="reset" value="重置">
<input type="submit" name="submit" value="提交">
</table>
整个代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
<style>
span{
margin-left: 60px;
color: darkblue;
}
.div1{
width: 380px;
height: 600px;
background-color:lightgoldenrodyellow;
margin-left: 100px;
padding: 30px ;
line-height: 40px;
}
div{
margin-left: 70px;
}
</style>
</head>
<body>
<h2>1.表单标签 及 表单属性</h2>
<p>
·表单标签是 ：<b>form</b><br>
·表单属性有：action 和 method；<br>
<b>·action属性：</b>规定向何处发送表单数据。<br>
<b>·method属性：</b>规定用什么方法发送数据。（get和post）<br>
get:在发送的url后面拼接表单数据，明文显示表单数据的内容，url的长度有限制。<br>
post：在消息体/请求体中传递，参数大小无限制。
</p>
<h2>2.表单项 及 属性</h2>
<p>表单标签中常包括三种表单项标签：<b>input、select、textarea </b> </p>
<p style="text-indent: 30px;"><b style="color: blue;">·input：</b>定义表单项，通过type属性控制输入</p>
<span>type属性的值有：</span>
<div>
① text：默认值，定义单行的输入字段<br>
② password：定义密码字段<br>
③ radio：单选按钮,name属性相同表示在一个备选圈中，value属性不同，表示各自的选项;如果最外层嵌套label标签，这样不用精准点击方格，点击文字部分也可选中<br>
④ checkbox：复选<br>
⑤ file：文件上传<br>
⑥ data/time/datatime-local：定义日期、时间、日期和时间<br>
⑦ number：数字输入框<br>
⑧ email：邮件输入框<br>
⑨ hidden：隐藏域<br>
⑩ submit/reset/button：提交、重置、可点击按钮，value属性的值会展示在按钮上
</div>
<p style="text-indent: 30px;"><b style="color: blue;">·select：</b>下拉列表，标签 <b>option</b> 定义列表项</p>
<span>形式写法：</span><br>
<div> <img src="select.png" width="400px"> </div>
<p style="text-indent: 30px;"><b style="color: blue;">·textarea：</b>定义文本域</p>
<span>常见属性的值有：<b>cols和row</b></span>
<div>
① cols:一行最多有几个字符<br>
② rows:默认可以写几行
</div>
<h2>3.效果展示：</h2>
<div class="div1">
<table action="" methods="get">
<h1 style="text-align: center;">基础信息表</h1>
姓名：<input type="text" name="name"> <br>
密码：<input type="password" name="password"> <br>
性别：<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女 <br>
爱好： <label><input type="checkbox" name="love" value="1"> 唱歌</label>
<label><input type="checkbox" name="love" value="2"> 跳舞</label>
<label><input type="checkbox" name="love" value="3"> 绘画</label> <br>
上传简历pdf：<input type="file"> <br>
选择日期 和 时间：<input type="datetime-local"><br>
年龄：<input type="number"><br>
邮件：<input type="email"><br>
学历：<select name="degree">
<option value="1">-----下拉选择学历-----</option>
<option value="2">高中</option>
<option value="3">本科</option>
<option value="4">研究生</option>
</select><br>
其他留言：<textarea cols="30" rows="6"></textarea><br><br>
<input type="button" name="button" value="按钮">
<input type="reset" name="reset" value="重置">
<input type="submit" name="submit" value="提交">
</table>
</div>
</body>
</html>