form表单结构的简单介绍

来源:互联网 发布:网络维护员的技能 编辑:程序博客网 时间:2024/06/03 14:58
 最近在复习css的基础知识,美其名曰:“温故而知新”。哈哈,开个玩笑,不过确实重新认识到之前在学习时不去注意的一些细节,例如一些语义化标签的运用。现在像把表单的结构标签简单的做下总结。当是增强记忆,也检验检验自己“温故”的成果。如有纰漏,还请各路大神指出!
先插入一段代码先:
<form action="#" method="post" id="regForm"><fieldset><legend>个人基本信息</legend><div><label for="userName">名称:</label><input id="useName" type="text" /></div><div><label for="passWord">密码:</label><input id="passWord" type="password" /></div><div><label for="msg">详细信息:</label><textarea id="msg"></textarea></div></fieldset></form>


1.form标签中的重要属性:<form action="表单提交的地址"   method="表单提交的方法"   id=“id属性,具有唯一性”  class=“类名 ,可以添加样式”>
其中,action属性相当于<a>标签中的“href”属性。method表单提交的方法可以是“post”或者“get”。(具体两种提交方式有什么区别,之后会提到。更建议大家自行找区别找答案)
2.fieldset标签:作用是将表单内相关元素分组;将表单内容的一部分打包,生成一组表单的字段,其中在一个form表单中,可以有一个或者多个fielset标签。
3.legend标签:作用是为fieldset标签定义标题。
4.label标签:相信这个标签大家都不陌生,该标签在页面中使用不会为用户呈现任何特殊效果,但是却可以很好地为鼠标用户改进了可用性。其作用是为input元素定义标注,要注意的是label中的for属性应与input中的id属性一致,如图中代码。
5.input标签:输入框,其中可以根据type的属性值改变输入框的作用。例如:<input  type=“text”/>  是文本框,<input  type=“tpassword”/>  密码输入框   ,<input  type=“checkbox”/> 复选框,<input  type=“radio”/>  单选框 等等,其中html5为input标签添加了几个更具有语义化的type属性值,很实用,建议初学者可以了解下。
以上仅是本人的愚见,如果有错误的地方还请各位大牛们多多指教。
0 0
原创粉丝点击