form表单结构的简单介绍

 最近在复习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
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值