JavaWeb03——基础标签及样式(表单)（黑马视频笔记）
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>