html表单

最新推荐文章于 2022-03-22 15:44:07 发布

flyings1988

最新推荐文章于 2022-03-22 15:44:07 发布

阅读量149

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/flyings1988/article/details/83754346

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

表单标签

属性
- action
  - 表单提交的地址
- target
  - 行为类似a标签的target
- method
  - 表单提交方式
    - get
      - 将表单字段拼成querystring
        什么是querystring？
        http://abc.com/?a=1&b=2&c=3
    - post
      - 这个等学到http再说
- enctype，编码方式
  - 在讲到http的时候再谈

input

type属性的各项值
- text
  - 文本
- password
  - 密码
- checkbox
  - 复选框
  - 以name相同分组
  - checked属性表示默认选中
- radio
  - 单选框
  - 剩余同上
- file
  - accept
    - 可以接受的文件类型
    - <input type="file" name="" id="" accept="image/*,text/*">
    - MIME Type
    - <input type="file" name="" id="" accept=".jpg,.png,.gif,.jpeg,.webp,.exe" value="c:/user/xieran/desktop/a.pdf">
    - http://wwww.a.com/favicon.ico
  - 安全问题
  - multiple
    - 是否支持多选文件
- hidden
  - 隐藏的输入域
  - value设置其值
  - name设置名字
- 为以下三个值时，都表现为按钮的样式，按钮上的文字需要用value属性来设置
- image
  - 此时需要使用src属性指定图片的地址
  - 现在基本上不这么用，之所以有这个用法，是以前不用js时想做出漂亮的按钮时，需要这么用
  - 在html5中，可以在这种标签上给定width跟height，类似img标签相应的属性，src，alt
- button
- submit
  - 单击时会触发表单的提交
- reset
  - 单击时会重置表单为初始状态
- 以下为html5新增属性值
- number
  - 输入数字
  - e,.,-
  - -3.14e-8
- email
  - multiple
  - 使用半角逗号分隔每个地址
- date
- datetime-local
- time
- url
  - protocal://user:password@domain:port/a/b/c/d.html?a=b&c=d#sldjfoiwjeofij
  - 百度.中国
- week
- month
- tel
- range
  - min，4
  - max，10
  - step，2
- color
  - value将返回十六进制颜色#abcdef
- 不能识别的值，当做text来处理

其它属性
- value
  - 为按钮形态时设置上面的文字
  - 为输入框时设置里面的默认内容
    - datetime-local
      - https://zh.wikipedia.org/wiki/ISO_8601
- disabled
  - 无值的属性
  - 禁用这个输入域
- required
  - 设置这个输入域为必填项
  - 不填的话无法用正常手段触发表单提交
- maxlength
  - 为文本输入框时设置输入的最大长度
- minlength
  - 同上，但为设置最小长度
  - 不过兼容性不太好，不少浏览器没有实现
    - 有点矛盾，不填的时候是空的，当然会非法
- placeholder
  - 占位符
  - 提示性文字，一旦输入内容就消失
- autofocus
  - 自动获得焦点，即页面加载完后光标自动在这个元素内
- tabindex
  - 按tab键在不同输入域之间跳转时的顺序
  - 会往顺序更大的元素跳
  - 为-1的话会跳过那个元素
- name
  - 很重要，表单提交时，这个域/字段/框/FormControl的名字
  - 同时，在radio和checkbox阵列里，name相同的元素被分在一组里

button

type属性
- 不写type属性的话，默认为submit
  - 即：无type的button的type属性默认为submit
- <button type="reset/button/submit">Submit</button>
- button
  - 常规按钮，功能上与input[type=“button”]一样
- submit
  - 提交按钮，功能上与input[type=“submit”]一样
- reset
  - 重置按钮，功能上与input[type=“reset”]一样
与<input type="button" name="b" value="lksjdf">的区别
- input的button只能在按钮上显示纯文字
- 而button标签可以在按钮上显示其它内容比如图片（即嵌套其它标签），文字也可以设置不同颜色等

label 标签

一般与checkbox及radio一起用，以扩大这两个按钮的可点击区域，提升用户体验。当然，也可以跟其它元素一起用，不过一般没必要（比较典型的是与input:file一起用）

for属性
- 为想要被扩大点击区域的元素的id，不带井号
- 支持度非常好，ie5都支持
- 细节：在ie8及以下不能用于displaynone的表单元素，可能是因为 not focusable
- 表单元素嵌套在label的时候可以不用for属性
```
<form action="">
  有for的用法
  <label for="oneid">One</label>
  
  <input onclick type="text" id="oneid">

  不用for的用法
  <label>
    <input type="checkbox"> 男
  </label>
</form>
```

如下怎么算呢？

<input id="a">
<label for="a">
  <input type="text">
</label>

典型的坑，两次点击，等学了js后再谈
select name=“sel”

下拉选择框
属性
- multiple
  - 无值属性，表示多选，多选时就不是下拉的样式了
另外此标签在不同的系统里面样式差别很大，而且它的样式一般来说是取自系统自带的，所以很难被css控制
- 所以一些对ui要求比较高的网站都选择用其它元素模拟下拉框
  - 例：小米路由器

option
value
- 选择了该项目后它所属的select元素的值
selected
- 默认被选中
disabled
- 表示该项被禁用
hidden
- 表示该项被隐藏

以上三个属性均无值

optgroup // hgroup colgroup

给option分组
用label属性表示这个分组的名字
无法被选中，只能选择option
有一个disabled属性，如果设置了这个属性，整组标签都会被禁用

<select>
    <option value="1">1</option>
    <optgroup label="这是一个分组" disabled hidden>
        <option value="01">01</option>
        <option value="02">02</option>
        <option value="03">03</option>
        <option value="04">04</option>
        <option value="05">05</option>
    </optgroup>
</select>

兼容性不确定，因为我没用过mac。。。。
textarea

多行文本输入框
两个特殊属性
- rows=“3”
- cols=“20”
不过现在也不常用，一般都用css来控制了

field set 字段组用来把一组输入域放在一起的。

field就是字段的意思，就是说一个表单输入域（输入框）
这个标签用来给输入域分组，所以叫set
- set本来就是组的意思
如果只是分组，完全可以用div等标签
- 那这个标签有什么用呢？
- fieldset有个disabled属性，如果它有了这个属性，其内的所有输入域都将被禁用，类似optgroup
  - 在某些场景下是非常好用的

legend

只能作为 fieldset 的子元素，用来标识这组输入域的名字，基本上没有其它用处
- 而且在有了css之后，这个标签基本也没有用武之地了

table标签

这个标签以前经常用于做布局

什么是布局？即页面大区块的排列和摆放
为什么呢？因为table都是方方正正格子，了解后很容易控制
- 语义很差
- 可读性很差
- 可维护性也很差 maintainable
- 可访问性
但现在有了 css 之后，基本上只用table来显示数据，即表格本来的作用
熟悉 DIV+CSS 布局 JD Job Description

caption

表格标题

thead

表头
做为table的直接子元素
只能有一个
只有一个的情况下，即使出现在tbody的后面，其内容也会显示在tbody的前面
非要写多个的话，第一个以外的会当做tbody来处理

tbody

表格主体
做为table的直接子元素
可以有多个

tfoot

表尾
做为table的直接子元素
只能有一个
只有一个的情况即使出现在tbody的前面面，它的行也出现在tbody的后面
非要写多个的话，第一个以外的会当做tbody来处理

table row cell
表格行
可以直接做为table的子元素，会被放入创建的tbody里面
或者做为上面三个标签(thead/tbody/tfoot)的子元素

table header cell
用在表头单元格
文字默认为加粗
id用于被td元素引用以表示td所属的标题是哪一个
- 看例子

table data，表格数据单元格
headers
- 表格头，值为某th的id，以表示这个数据的名称
  - 方便读屏软件
- headers的值可以是多个以空格分隔的th的id的值，用法可能是th或td单元格跨行或跨列了
跨行跨列的单元格
- col span 跨列
- row span 跨行
- 错误的示范：
- http://www.splaybow.com/html-table-rowspan-colspan.shtml
http://jsbin.com/nikifi/edit?html,output
http://jsbin.com/yehecez/edit?html,output
http://jsbin.com/susomoh/1/edit?html,output

col/colgroup 标签

colgroup
- 用来分组col标签
- span属性，表示选择多列表格
- 有span时，不可再有子的col元素
- 大部分属性同col元素
col
- 用来设置表格列的属性和样式
- span属性，表示选择多少列表格列，默认为1

可以单独使用，也可以被colgroup分组

<table>
    <caption>表格标题</caption>
    <col>
    <col>
    <colgroup></colgroup>
    <colgroup></colgroup>
    <colgroup bgcolor=red>
        <col>
        <col bgcolor=navy>
    </colgroup>
    <tbody>
      <tr bgcolor="red">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
</table>

必须出现在caption后面，thead/tbody前面
很多属性不支持了
- 而w3schools上面还列着
- http://www.w3school.com.cn/tiy/t.asp?f=html_col_test

其它
border-spacing CSS属性, spacing是重合的
cellspacing=0
tr或者td or th不能有其它并列标签,否则会识别错误
有些元素的 position:relative 无效，见下
https://stackoverflow.com/questions/6746175/html-tr-tag-and-positionrelative
box-shadow 也不支持某些类型的元素
https://stackoverflow.com/questions/10874985/box-shadow-on-table-row-not-appearing-on-certain-browsers
map

不是“地图”标签，是“映射”标签
name属性
如果设置id属性的话，id跟name属性值必须一样

area

必须做为map的子元素
w3school上的错误示范：http://www.w3school.com.cn/tags/att_img_usemap.asp
属性

href
target
alt
以上三个属性同a标签
shape
- rect(angle)，矩形
  - x1,y1,x2,y2
- circle，圆形
  - cx,cy,r
  - 圆心x，圆心y
  - 半径r
- poly(gon)，多边形
  - 至少6个值，表示一个多边形的若干个顶点
coords coordinate
- 对应shape的几种图形的坐标

code

<img title="image title" src="https://drscdn.500px.org/photo/174778125/m%3D1170_k%3D1/2841ccf2a3720e8e794a6a6930f6ff2c" width=300 usemap="#somemap" alt="">

<map name="somemap">
  <area shape="rect" coords="55,108,205,200" href="https://www.mi.com/" alt="ieksoef" title="abc" target="_blank">
  <area shape="circle" coords="133,262,90" href="" alt="">
  <area shape="poly" coords="57,82,8,265,163,397,225,256,187,83" href="" alt="">
</map>

flyings1988

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html表单

表单标签form标签inputhttps://www.google.com.hk/search?q=invalid+inentity+escape+in+regular+expressionhttps://stackoverflow.com/questions/36953775/firefox-error-unable-to-check-input-because-the-patt...
复制链接

扫一扫