day3 html 表格/表单控件

Html body级别标记2

注释，前台不显示

<!-- 在此处写注释 --> 注释

表格

• 标记说明
  table:表格 tr：表格中的行 td:行中的列:实际填值的层级 以上是层级/包含的关系

• 属性说明

  • table层级的说明

border 最外层的边线粗细，默认不显示为0（在tr td层级之间无效）
width 宽 height 高
cellspacing 表格内的每个格子之间的间隙，默认为2px 如果想实现行内线的粗细调整，可通过设置bgcolor将背景涂黑，再调整间隙，让间隙加大，漏出背景色来实现
cellpadding 表格边框和表格内内容（文字/图片等）之间的距离

• 全层级的说明
  align 指定行或者列左右对齐方式，值 left、center、right 在table上时为整个表格在网页上的对齐方式，在tr上是在当前行（整行）的对齐方式（左中右） 在td上是当前行的当前列（某个格子）的对齐方式（左中右）
  valign 指定行或者列的上下对齐方式 值 top middle bottom 出现在table时，没有任何效果 在tr中是当前行（整行）的垂直对齐方式（上中下） 在td上是当前行的当前列（某个格子）的水垂直对齐方式（上中下）
  bgcolor 背景色 table中：整个表格 tr 当前行的背景色 td 当前行的当前列的背景色
  background 背景图片 background = 'timg.jpg'
  如果某个标签在每个层级都有时，以最小层级的为准，如 当bgcolor在table tr td上设了不同的值，以最小的为准

eg:

<table>
		<tr>
			<td>
			行1列1
			</td>
			<td>
			行1列2
			</td>
			<td>
			行1列2
			</td>
		</tr>
		<tr>
			<td>
			行2列1
			</td>
			<td>
			行2列2
			</td>
			<td>
			行2列2
			</td>
		</tr>
    </table>

实例：

行1列1	行1列2	行1列2
行2列1	行2列2	行2列2

• 表格的跨行/跨列（合并单元格）
  rowspan 跨行（上下合并，合并列），属性值代表合并了几个格子，rowspan = '2'
  colspan 跨列（左右合并，合并行），属性值代表合并了几个格子，colspan = '2'
  其实意思就是这个格子占据了上下或者左右的几个格子，因此被合并的格子不需要写了

test：简历

作业：
[地址](…\练习/0304 test1.html)

表单<form>

表单，用于与用户交互，进行数据的收集、处理和提交（收集用户填写的内容，进行一定的计算、包装或者直接提交给后端）

属性

action 设置数据提交的访问路径
method 设置表单提交方式，默认为get
get（不推荐） 将表单采集的数据，跟随在后端处理程序的访问路径后提交，因路径长度限制（全部一共上限255个字符），因此数据量有限制的
post 将表单采集的数据封装到防落协议中提交给后端处理程序
enctype 表单数据的编码格式 默认为 application/x-www-form-urlencoded

值	描述
application/x-www-form-urlencoded	在发送前对所有字符进行编码（默认）。
multipart/form-data	不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
text/plain	将空格转换为 “+” 符号，但不编码特殊字符。

输入性表单元素

• 文本框
  <input name = "textbox1" type = "text" value = "默认值">
  name 获取控件的组件名称，字段名
  type 组件类型
  value 默认值
  maxlength=“8” 输入字符最大长度限制

• 密码框
  <input name = "psw" type = "password" value = "默认值">
  输入数据将被显示隐藏，其他与text一样

• 单选按钮

<input name = "danxuan"   type = "radio" value = "nan" checked = "checked"/>男
<input name = "danxuan"   type = "radio" value = "nv"/>女

当name一样时，其为一组数据，其中只可单选1个数据，在提交数据时，提交被中的数据的vaule
checked = “checked” 默认被选中

• 复选

<input name = "danxuan"   type = "checkbox" value = "nan"/>男
<input name = "danxuan"   type = "checkbox" value = "nv"/>女

当name一样时，其为一组数据，可多选数据，在提交数据时，提交被中的数据的vaule
checked = “checked” 默认被选中

• 日期 ？默认值、日期格式等
  <input name = "textbox1" type = "date" >
  max=“1979-12-31” min=“1979-12-31” 最大最小值
• 文件选择
  <input name = "textbox1" type = "file" >
  accept 限制文件格式后缀， accept=“image/gif, image/jpeg” 通过meme类型，或者只记写“.pdf”等后缀名进行限制，两种可混用，如accept="image/gif,.pdf"
• 隐藏域
  <input name = "hid" type = "hidden" value = "test">
  设置隐藏域的数据值，用于提交固定值给后端
• 颜色框
  <input name = "yanse" type = "color" value = "#fffffff">
• 邮箱
  <input name = "mail" type = "email" >
  用于在提交时验证邮箱是否合规
• 网址
  <input name = "url" type = "url" >
  用于在提交时验证邮箱是否合规
• 提交按钮
  <input name = "hid" type = "submit" value = "提交">
  value 在提交按钮时显示的值
• 表单重置
  <input type = "reset" value = "提交">
  value 在重置按钮时显示的值
• 按钮
  <input type = "button" value = "提交"onclick = alert("我是一个消息框！")>
  value 在按钮上显示的值 ，onclick，在点击后触发的事件
• 下拉按钮

<select  name = "下拉上显示的值">
   	<option value ='test1'>可选值1</option>
   	<option value ='test2'可选值2</option>
   	<option value ='test3'>可选值3</option>
   </select>

value 被提交的值，当value没有时，被提交的为注释内的值。

• 文本域
  <textarea cols = "20" rows = "10"></textarea>
  cols 每行字数/宽度，rows 行数/高度 当超出行数时，将生成滚动条

• 属性：占位符（输入框文字注释，只可在html5中使用）
  placeholder 属性适用于以下的 input 类型：text, search, url, telephone, email 以及 password
  eg：<input type="search" name="user_search" placeholder="Search W3School" />

test：注册