绝对都是干货---HTML表单标签详解

1.什么是表单?:专门用来收集用户的信息。

2.什么是表单元素?:在HTML中,标签/标记/元素都是指HTML中的标签。表单元素其实还是HTML中的一些标签,只不过这些标签比较特殊。在游览器中所有的表单标签都有特殊的外观和默认的功能。

3.表单的格式

<form>
    <表单元素>
</form>

4.常见的表单标签

4.1 input标签:有一个type属性,这个属性有很多类型,取值的不同就决定了input标签的功能和外观。
4.1.2 明文输入框格式

<input type="text">

4.1.3 暗文输入框格式

<input type="password">

4.1.4 给输入框输入默认值格式

明文:<input type="text" value="">
<input type="password" value="">

4.2 单选框格式:
性别:

<input type="radio"name="xzx">男
<input type="radio"name="xzx">女
<input type="radio"name="xzx">保密

4.2.1 多选框格式:

<input type="checkbox">

4.3 单选框注意点:
4.3.1 默认情况下,单选框不会互斥。要想互斥,必须给每一个单选框设置一个name属性 ,然后这个name属性的值还要相同。
4.3.2 要想让单选框默认选择一个框子,那么可以给input添加一个checked属性。

4.4 代码展示:

<form>
明文输入:
   账号:<input type="text">
暗文输入:
   密码:<input type="password">
给输入框输入默认值
<input type="text" value="">
<input type="password" value="">
单选框:
性别:
<input type="radio"name="xzx">男
<input type="radio"name="xzx">女
<input type="radio"name="xzx">保密
多选框
<input type="checkbox">
</form>

5.表单标签(按钮)

5.1 作用:定义一个普通按钮,配合JS完成一些操作。
5.2 格式<input type="buttom">
5.3 注意点
5.3.1 也可以用图片进行制作按钮。
5.3.2 通过value这个属性可以给按钮添加名称。格式:<input type="buttom" value="我是按钮">

5.4 重置按钮
5.4.1 格式<input type="reset" value="清空">
5.4.2 作用:用来清空表单中的数据

5.4.3 注意点:重置按钮有默认的按钮标签,默认叫做 重置,也可以通过value属性进行修改标标题。<input type="reset" value="清空">

5.5 提交按钮
5.5.1 作用:将表单中的数据提交到远程服务器
5.5.2 格式:<input type="submit">

5.5.3 注意点: 想要把表单中的数据提交到远程服务器,必须满足两个条件
1)告诉表单需要提交到哪个服务器
可以通过form标签的action属性来告诉表单,需要提交到那个服务器。
格式:<form action="网址">

2)告诉表单,表单中的哪些数据需要提交
格式:账号:<input type="text" name="">(需要添加一个name属性。)

6. Label标签

6.1.默认情况下,文字和输入框是没有关联关系的。要想让输入框和文字绑定在一起,我们可以使用Label标签。

6.2 绑定的格式

<label>
<input type="text">
</label>

7. datalist标签
**7.1 作用:**给输入框绑定选项
7.2 datalist格式:

<datalist>
   <option>
	待输入选项
   </option>
</datalist>

7.3.如何给输入绑定待选列表?
1)搞一个输入框
2)搞一个datalist列表
3)给datalist添加一个id
4)给输入框添加一个list属性
将datalist的id赋值给list。

<input type="text" list="cars">
<datalist id="cars">
    <option>
      待输入选项
    </option>
</datalist>

猜你喜欢

转载自blog.csdn.net/weixin_44989801/article/details/106652212