表单
作用:收集数据,收集客户信息
包括两部分:表单域和表单控件
1.表单域
form,叫表单域,里面存放表单控件
表单内还有表单控件 input,他属于空标记,添加表单控件的其中一个标签,通过type属性的属性值来显示不同的表单控件
form 可以嵌套其他的标签,例如table
Form属性action、method、name,
所有的标签都有name属性,但是form中的name属性是必选项,没有name,后期是无法进行提交的
2.表单控件
表单控件属性:
type 表单控件类型选择
value 是表单内容的初始值、默认值
placeholder 添加提示信息
checked 默认选中属性,属性值和属性名相同;用于单选框或者多选框
disabled 禁止选中;属性名和属性值相同,设置后无法选中;用于单选框或者多选框或者输入框
name 所有标签都默认存在的属性,只是在表单中该属性必须设置,否则上传数据有误;下拉菜单中非必须
id 设置的id名
注:按钮 按钮标签 本质和 一样,建议使用input
type 表单控件的类型;
包括:
text 文本输入框;账户输入
password 密码框
reset 重置按钮
button 空标签
submit 提交按钮
radio 单选按钮(单选框);默认无法只能选一个,并且选中后无法取消
方案:通过name属性去判断这几个单选框是不是属于一个组的,一个组会只能选一个
name一致则是一个组的,需用英文命名
checkbox 复选框;可以同时选中多个,也可取消 file 上传文件按钮 hidden 隐藏表单元素;主要用于储存内容,不会在浏览器内显示,常用于交互验证
3.下拉菜单
他的默认选中属性是selected,加在option
selcect加size属性会变成列表,一般不用
出生日期: 1991 1992 1993 年
4.多行文本框,评价或者留言这种,可以理解就是可以输入多行文本的输入框
rows 行数
cols 列数
但是一般不用行数和列数去设置,因为框会动,常用直接使用class名后用css设置
去除可拖拽属性 {resize:none;}在css设置
vertical-align 设置文字垂直
5.表单标签(补充)
(1)
表单字段集
说明:相当于一个方框,在低端机中科院包含文本和其他元素。该元素对于表单中的元素进行分组并在
在文档中区别标出文本。
fielset元素可以嵌套,其内部可以在设置多个fielset对象。disabled定义空间禁制可用
特点:可以嵌套,自己或者其他元素;自带边框
作用:给表单元素划分区域,或者进行分组
注:他是写在表单内的;
由于本身自带一些样式属性,比如说边框可以先设置border:none,再去设置border-top
(2)
字段集标题
说明:该元素可以在fieldset对象绘制的方框内插入一个标题;legend袁术必须是fieldset内的
唯一一个legend元素
align=“left/center/right/justify” 设置的是legend的位置,还会设置到内部内容对其
如果单纯想将标题改变对其方式可以使用padding
(3)
说明:该元素用来定义标签,为页面上的其他元素指定提示信息,要将label袁术绑定到其他的控件上,可以将
label元素的for属性设置为与该控件id属性值相同;
一般在左边提示文字加上后,导致表单控件无法对其的解决方法是给label标签加样式,转换行内块元素,加统一宽度再去设置对齐
–>
<form action="" method="" name=""> <!-- 表单控件最好用div或者p(p自带行间距)标签包裹起来,这样块元素独占一行,尽量避免使用br标签 --> <div>账号<input type="text" placeholder="我是提示信息" /></div> <div>密码<input type="password" disabled="disabled" /></div> <!-- 自带默认value是重置,需要换字体就设置value属性 --> <p><input type="reset" /></p> <!-- button 空标签 --> <p><input type="button" /></p> <!-- 自带默认value是提交,需要换字体就设置value属性 --> <p><input type="submit" value="安全登录" /></p> <p> 你的性别是 <input type="radio" name="sex" id="" checked="checked" />男 <input type="radio" name="sex" id="" />女 </p> <p> <input type="checkbox" checked="checked" />音乐 <input type="checkbox" />足球 <input type="checkbox" disabled="disabled" />游泳 </p> <p> 请上传文件 <input type="file" name="" id="" /> </p> <p> 出生日期: <select> <option value="">请选择</option> <option value="" selected="selected">1991</option> <option value="">1992</option> <option value="">1993</option> </select> 年 </p> <p>请留言<textarea name="" rows="3" cols="10"></textarea></p> <fieldset> 我是fieldset,可以嵌套 <fieldset>里面的</fieldset> </fieldset> </form> <form action=""> <fieldset class="fiew"> <legend align="left">详细信息</legend> <p>地址<input type="text" name="" id="" /></p> <p> <label for="times">时间</label> <input type="text" name="" id="times" /> </p> </fieldset> <fieldset disabled="disabled"> <p> <label for="names" class="lab">账号</label> <input type="text" id="names" /> </p> <p> <label for="psd" class="lab">微信密码</label> <input type="text" id="psd" /> </p> </fieldset> </form>