第九课-表单与表格
第九课-表单与表格
一、表单的工作原理
二、Form表单
form表单是包裹表单的数据
<form id="" action="UPL" method="GET">
<input type="text">
</form>
1.action 一个处理这个form信息的程序所在的URL 规定向何处发送表单
2.method提交表单的方式
post: 表单数据会包含在表单体内然后发送给服务器. 这种只是相对get方式安全一些，而更安全的要等到我们学习js之后才可以
get: 表单数据会附加在 action 属性的URI中，并以 ‘?’ 作为分隔符, 然后这样得到的 URI 再 发送给服务器. 当这样做（数据暴露在URI里面）
- target：指示在提交表单之后，在哪里显示收到的回复 _self默认 _blank在新窗口打开 _parent父框架
4.name: 这个form的名字。在HTML4中，这个用法不被推荐(作为替代，应该使用id).
action="服务器地址" 网页地址
https：协议（更安全）
http：
www：万维网
www.baidu.com域名
method=“提交方式”
get 发送数据（数据不安全）
post 发送数据（相对安全些）
name=“名称” 被ID选择器代替
三、表单标签
为基于Web的表单创建交互式控件，以便接受来自用户的数据。大部分用input标签来定义 表单元素！决定表单元素的类型的取决于type属性！
/*表示文本框*/
<input type="text" name="" value="" placeholder="">
1.type 表单控件的类型
2.name 与表单数据一起提交的控件的名称。
3.value 控件的初始值。该属性是可选的，除非type属性的值为radio或checkbox。
4.placeholder 向用户提示可以在控件中输入的内容。占位符文本不得包含回车符或换行符。
四、表单type属性
password:其值被遮蔽的单行文本字段
/*表示密码框*/
<input type='password' name='password' value='' placceholder=''>
radio：一个单选按钮，允许从多个选项中选择一个值。要注意name值必须要相同的，不同不能选择到
radio 需要name名称，没有name属性不能取消选择
没有的就是只能选择自己（浏览器在识别时，没有名称就归结为一体）
/*表示单选按钮*/
<form>
<input type='radio' name='sex' value='' id='man'>
<input type='radio' name='sex' value=''>
<input type='radio' name='sex' value=''>
</form>
checkbox:多选按钮
checked 表示开始时自动选择到该标签 disabled禁用某项
/*表示多选按钮*/
<input type='checkbox' name='' value='' checked>
submit：提交表单的按钮
/*提交表单按钮*/
<input type='submit' name='' value=''>
reset：一个按钮，将表格的内容重置为默认值
/*重置按钮*/
<input type='reset' name='' value=''>
file：让用户选择文件的控件。使用accept属性来定义控件可以选择的文件类型可以不写。
multiple 允许上传多个
/*提交文件按钮*/
<input type="file" accept="image/png,image/gif,image/jpeg"/>
image:上传的图片
/*上传图片*/
<input type='image' src='' name='' width='' height=''>
h5标签
type类型
number 数字输入框 min最小值 max最大值
<input type="number" name="" value="5" min="0" max="10">
range 数字滑块
<input type="range" value="10" min="0" max="20">
time 小时 分钟 date 年月日 month 年月 week 年周 color 颜色
<input type="time">
<input type="date">
<input type="month">
<input type="week">
<input type="color">
五、Input的属性
1.autocomplete: 是否记忆已经提交过了内容 no off ?
2.required 必须要填写这一项才能提交 要配上提交 ? ?
3.placeholder=【普里斯偶的】填写提示
4.Checked 表示开始时自动选择到该标签 disabled 禁用某项
5.《label for="pwd" 》 然后在input里面写上 id=“pwd” 倒时选择文字 也是选中文本框
input 文件框==控件
属性：
type="文件框类型"
name="名称"
value="控件的初始值"
placeholder="输入提示"
autocomplete="on" 是否记住提交内容
off 不记住
required 必须填写
autofocus 光标自动聚焦
input 行内块元素
去除默认光标
换行符
伪类选择器
:hover 光标
:focus 当元素被聚焦时触发CSS样式（聚焦：鼠标放上去时）
:focus-within 当元素自身或后代被聚焦时触发CSS样式
:checked 当元素被勾选到的时候触发CSS样式
聚焦是文本框（input）或输入框才会有聚焦
outline(不属于合资模型的一部分, 相当于盒子周围散发的光芒) 输入outline：none取消光芒
radio checkbox
autofocus=true 使用此布尔属性，可以指定页面加载时表单控件应具有输入焦点。文档中只有一个与表单相关的元素可以指定此属性;
参考文献: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
六、非input属性
<textarea name="textarea" row="10" cols="50">hello</textarea>
可以通过cols和rows属性来规定textarea的尺寸（https://www.w3school.com.cn/tags/tag_textarea.asp ）
<select size="2">/*显示几行*/
<option value="">Volvo</option>/*下拉选项*/
<option value="" disbled>Saab</option>/*表示禁止使用*/
<option value="" selected>opel</option>/*默认使用*/
<option value="">Audi</option>
</select>
七、fieldset 给表单分组
通常用来对表单中的控制元素进行分组,要写在form元素里面。
八、表格的使用
<table>//表格
<caption>标题</caption>//表格的题目 自动居中
<tbody>//表格的行标签
<tr>
<th>1</th>//单元格标签
<th>2</th>
<th>3</th>
</tr>
<tr>
<td>a</td>//单元格标签
<td>b</td>
<td>c</td>
</tr>
</tbody>
<tfoot>//表格的表尾
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</tfoot>
</table>
//默认样式
<style>
table{border-collapse:separate;}
table,th,td{padding:0;}
</style>
thead 表头
tbody 表格内容
tfoot 表尾
caption 标题
tr 一行
th 表头
td 表格
表格是会自动分配空间
可以设置宽度
border-collapse: separate; 默认值 分割边距
border-collapse：collapse【课路普速】1；会合并所以表格中的边框
border-spacing:3px; 像素值 距离屏幕的距离
行单元格合并：首先去除一个要合并单元格代码 在想要合并的td中写上 行colspan=“n” 就会向后吞并占据n个单元格
列单元格合并：首先去除一个要合并单元格代码 在想要合并的td中写上 例rowspan=“n” 就会向下吞并占据n个列单元格
浙公网安备 33010602011771号