11.label标签,按钮,form标签

一.label标签

  <label>标签可以用来绑定文字和表单控件的关系,增大表单控件的点击范围,例如单选框选择性别男或者女,当我们鼠标移动到单选框旁边的文字时,鼠标点击并不会产生选中效果,而当我们加入label标签之后,我们点击"男","女"文字时,单选框就会被选中.具体代码编写有两种方法

<input type="radio" name="gender" id="man"> <label for="man">男</label>

  第一种为这种编写方式,type属性确定<input>标签实现什么功能,name属性进行分组,最后的id属性,用来跟<label>标签内的for属性配对,属性值要相同,然后<label>标签包裹文字内容,这样子就可以将表单控制键与文字绑定,先不管id属性是什么,记住id属性跟for属性的属性值一致就行.

<label><input type="radio" name="gender"> 女</label>

第二种方式就非常简单,直接<label>标签包裹正规<input>标签就行,不用添加额外的属性,建议用这种,方便很多.

二.按钮

  在注册时填写完信息,就可以点击按钮进行注册,就像这样

要在网页中插入按钮,使用<button>标签就可以,使用方法与<input>标签一样,标签内加type属性,属性值不同,实现的功能不同,有submit,reset,button三种,submit属性值是提交按钮,点击就可以把数据提交到后台,这是个默认功能,就是不写type属性就是默认这个,不过现在实现不了,我们现在并没有后台来给我们提交数据,按了也没反应的,reset就是重置按钮,点击后我们表单区域所填的信息,选择的选项,全部回到默认状态,button就是普通按钮,没功能,后面用来配合JavaScript使用.

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>

三.form标签

  <form>标签用来规划一个表单区域,把一个表单里的全部表单控件包裹到from区域统一管理

<form action="">
     用户名: <input type="text">
    <br><br>
    密码: <input type="password">
    <br><br>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">普通按钮</button>
</form>

<from>标签内的action属性是我们要发送数据的地址,现在先不填.

如有错误,欢迎指正