郑州网站建设技术托管,商家货源网,lnmp中安装wordpress,wordpress 用户 关注fieldset 元素可将表单内的相关元素分组。
fieldset 标签将表单内容的一部分打包#xff0c;生成一组相关表单的字段。
当一组表单元素放到 fieldset 标签内时#xff0c;浏览器会以特殊方式来显示它们#xff0c;它们可能有特殊的边界、3D 效果#xff… fieldset 元素可将表单内的相关元素分组。
fieldset 标签将表单内容的一部分打包生成一组相关表单的字段。
当一组表单元素放到 fieldset 标签内时浏览器会以特殊方式来显示它们它们可能有特殊的边界、3D 效果或者甚至可创建一个子表单来处理这些元素。其默认格式是设置边框可通过设置style属性来改变。
fieldset 标签没有必需的或唯一的属性,一个表单元素form里可能有好几个fieldset。
其结构一般如下
fieldset
legendfieldset 元素定义的标题/legend!-- 正常表单元素 --/fieldset 下面是示例1 !doctype html
html
head
meta charsetutf-8
titlefieldset示例/title
/headbody
form methodpost actionsubmit.htmlfieldsetlabel fornameName:/labelinput typetext idname namename placeholderYour name requiredrequired /label foremailEmail:/labelinput typeemail idemail nameemail placeholderYour email address requiredrequired //fieldset
/form
/body
/html 相当于将fieldset中的表单元素打包在了一起并加了一个外边框。下面是代码跑出来的结果图1。 示例2 !doctype html
html
head
meta charsetutf-8
titlefieldset示例/title
/headbody
form methodpost actionsubmit.htmlfieldsetlabel fornameName:/labelinput typetext idname namename placeholderYour name requiredrequired //fieldsetfieldsetlabel foremailEmail:/labelinput typeemail idemail nameemail placeholderYour email address requiredrequired //fieldsetfieldsetlabel formessageMessage:/labeltextarea cols45 rows7 idmessage namemessage required placeholderWrite your message here./textareafieldsetinput typesubmit valueSend //fieldset
/form
/body
/html 一个表单元素form里可能有好几个fieldset每一个都加边框。结果图2 示例3 !doctype html
html
head
meta charsetutf-8
titlefieldset示例/title
/headbody
form methodpost actionsubmit.htmlfieldsetplabel fornameName:/labelinput typetext idname namename placeholderYour name requiredrequired //pplabel foremailEmail:/labelinput typeemail idemail nameemail placeholderYour email address requiredrequired //pplabel formessageMessage:/labeltextarea cols45 rows7 idmessage namemessage required placeholderWrite your message here./textarea/pinput typesubmit valueSend //fieldset
/form
/body
/html 与示例2的区别表单元素form里只有一个fieldset只加一个大边框。结果图3 更多专业前端知识请上
【猿2048】www.mk2048.com
