表单form

Posted 2020-10-26 luzhongwei

表单form

form标签必须的属性：action    规定当提交表单时向何处发送表单数据，就是表单提交的页面

　　　　　　　　　　method  规定用于发送form-data的http方法get和post，就是表单提交方法，默认get

form标签可选属性：    entype　　　　规定发送表单数据之前如何进行编码

　　　　　　　　　　accept-charset  规定服务器可处理的表单数据字符集

　　　　　　　　　　target　　　　　规定在何处打开action url

form标签的表单项有：input、button、textarea、select

input标签:

---

text文本框：

--必须有name属性--
size属性设置text框看到的内容数量(会改变文本框的宽度)
maxlength属性设置text可填写的最大数量(不会改变文本框的宽度)
value属性为text设置默认值

---

password密码框：

--必须有name属性--
size、maxlength、value属性和text文本框的用法、作用一样

---

file文件上传：

可通过size设置文件路径框的宽度
accept属性设置文件类型：例accept="image/*"
文件上传必须为其所在的form设置 enctype="mulitipart/form-data" 和 method=""post，否则上传到服务器的只是文件的路径字段，而不是文件本身。

---

checkbox复选框：

--必须有name和value属性--
--只有选中的项会被提交，提交给服务器的选中复选框的值是value属性中指定的文本字符串--
dog
bird
cat
fish
<input type="checkbox" name="pets" value="pets1">dog
<input type="checkbox" name="pets" value="pets2">bird
<input type="checkbox" name="pets" value="pets3">cat
<input type="checkbox" name="pets" value="pets4">fish
如果选择的是cat，那么提交给服务器的是pets=pets3
如果选择的是dog和bird，则提交的是pets=pets1&pets=pets2
checked属性为复选框设置为选中状态：

---

radio单选按钮：

--必须有name和value属性--
具有相同name的单选按钮是同一个组
一般要为每个radio设置不同的value值
checked属性为单选按钮设置为选中状态，同一组最多只能设置一个： 男 女 保密

---

submit提交按钮：

仅仅为input设置type="submit"，每个浏览器显示的按钮外观和提示文字往往是不一样的
一个表单可以有多个提交按钮
可以用value为提交按钮设置按钮的提示文字，比如value="提交"。
如果为submit设置name属性，提交表单的时候，submit的value值也将提交给服务器
name="submit",value="Submit",提交的是submit=Submit

---

reset重置按钮：

重置按钮是将填写的表单回到初始value值状态，并不是清空。
没有初始值：
有初始值：

---

image图像提交按钮：

--必须有src属性--
type="image"除了提交表单内数据以外，按钮本身也会提交给服务器一个数据
提交给服务器的是点击图片的位置x、y坐标，例如：x=17&y=19，
如果有name属性，比如name=map，则提交的是map.x=17&map.y=19
如果有name属性，这个图像提交按钮也就成了一个锚点

---

button单击按钮：

单击按钮默认不会执行任何命令，一般都是用javascript为单击按钮添加事件处理程序
type="button"默认没有提示文字，可以用value设置提示文字

---

hidden隐藏字段：

--必须有name和value属性--
无法在浏览器中看到隐藏字段。

---

button按钮标签：

type属性：
submit:作用和<input type="submit">一样
reset:作用和<input type="reset">一样
button:作用和<input type="button">一样
button按钮上的提示信息是<button></button>标签对中的文字，并非设置value值。
其提示信息可以是文字，也可以是图片。
<button>submit</button>submit
<button>reset</button>reset
<button>普通按钮</button>普通按钮
<button></button>默认样式：

---

textarea多行文本框：

cols 可见宽度 、 rows 可见行数 , 一般用css的width和height代替

---

select标签：
--必须有name属性--

作为下拉菜单：

dog cat bird fish
select默认显示弹出式菜单，如果为其设置size属性或multiple，其会显示为滚动列表 dog cat bird fish
在select中嵌入多个option来定义select的每个选项
size属性决定了一次可以显示出来多少个选项，multiple属性决定了是否可以多选
上面的select如果选中dog，则提交的是pets2=dog，如果选中dog和cat，则提交的是pets2=dog&pets2=cat
dog cat bird fish
option标签的selected属性是所在的选项处于选中状态
如果为option标签设置value值，则提交的是name=value，
如上面的选中的是cat，则提交的是pets3=Cat，如果没有value值，提交的是pets3=cat
可以用option的label属性的值来作option显示出来的选项
如果用label来设置option显示的选项，则option标签对里的内容将不会显示
而提交的值仍然是option标签对里的文字，如果option标签对里没有内容，则提交的为空

optgroup标签为option项分组，为optgroup设置label属性来显示每组的标题：
小狗 小猫 小鸟 小鱼 苹果 草莓 芒果 香蕉 小狗 小猫 小鸟 小鱼 苹果 草莓 芒果 香蕉

---

form表单项的其它属性

tabindex属性改变按Tab键时获得表单项焦点的顺序，顺序依次是1,2,3...
如果设置tabindex="0"或没有设置tabindex，那么先获得tabindex大于0的表单项的焦点，然后再按照先后顺序依次获得焦点

---

( T )
( S )
( G )
( F )
( R )
accesskey属性可以为表单项设置一个快捷键Alt+单个字符。
以下元素支持 accesskey 属性：<a>, <area>, <button>, <input>, <label>, <legend> 以及 <textarea></textarea>

---

disabled属性
readonly属性

---

可以使用label标签把文字和表单项绑定在一起：
1.隐式的：
<label><input type="checkbox">苹果</label>
<label><input type="checkbox">草莓</label>
<label><input type="checkbox">芒果</label>
<label><input type="checkbox">香蕉</label>
可以点击下面复选框后的文字试试：
苹果
草莓
芒果
香蕉
2.显式的：
<input type="radio" name="sex" id="man"><label for="man">男</label>
<input type="radio" name="sex" id="woman"><label for="woman">女</label>
<input type="radio" name="sex" id="secrecy"><label for="secrecy">保密</label>
男
女
保密

---

fieldset标签为表单项分组：
legend标签放到fieldset里边为其添加提示信息：

第1个分组

第2个分组( K )

第3个分组

第4个分组