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:注册

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页