表单form

Posted luzhongwei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了表单form相关的知识,希望对你有一定的参考价值。

表单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>
<button>reset</button>
<button>普通按钮</button>
<button></button>默认样式:


textarea多行文本框:



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

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

作为下拉菜单:


select默认显示弹出式菜单,如果为其设置size属性或multiple,其会显示为滚动列表
在select中嵌入多个option来定义select的每个选项
size属性决定了一次可以显示出来多少个选项,multiple属性决定了是否可以多选
上面的select如果选中dog,则提交的是pets2=dog,如果选中dog和cat,则提交的是pets2=dog&pets2=cat

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个分组



以上是关于表单form的主要内容,如果未能解决你的问题,请参考以下文章

form表单问题,找不到form表单对象

form表单怎么获取表单内数据

form表单,django的form表单,

vue获取form表单file

form表单提交上传图片

如何给动态添加的form表单控件添加表单验证