HTML笔记-表单标签

琪_哥ya

已于 2022-09-20 15:12:52 修改

阅读量180

点赞数

文章标签：前端 css

于 2022-09-17 22:42:54 首次发布

From 迪丽热琪(LQ)

本文链接：https://blog.csdn.net/qq_41137049/article/details/126640725

版权

表单

基本控件

以下为所有HTML版本均适用的属性

type属性	控件
text	单行文本框
textarea	多行文本框
radio	单选按钮
checkbox	多选按钮
password	密码框
button	普通按钮
reset	重置按钮
submit	提交按钮
select option	下拉菜单

单选按钮要有value值，向服务器提交的就是value值
HTML4-label标签
input标签的属性作用：
name定义表单元素名字
value定义表单元素值
checked用于设置默认选中状态
type属性用于input标签表单元素的类型设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本控件</title>
</head>
<body>
    <!-- post和POST都可以 -->
    <form action="" method="post">
        <p>
            <!-- value：已经写好的值 -->
            请输入你的姓名：<input type="text" >
        </p>
        <p>
            <!-- placeholder：提示文本，以浅色文字写在文本框中  "-->
            报考院校：<input type="text" value="清华大学" >
        </p>
        <p>
            <!-- placeholder：提示文本，以浅色文字写在文本框中  "-->
            毕业院校：<input type="text" placeholder="请输入真实的毕业院校">
        </p>
        <!-- disabled：用户不能和元素交互，即锁死 -->
        <p>
            <!-- placeholder：提示文本，以浅色文字写在文本框中  "-->
            身份证号码：<input type="text" value="1234567890" disabled>
        </p>
        <p>
            <!-- radio：单选按钮 -->
            <!-- 互斥的单选按钮设置name值相同即可 -->
            <!-- 单选按钮要有value属性值，向服务器提交的就是value值 -->
            <!-- 男：<input type="radio" name="性别" id="男">
            女：<input type="radio" name="性别" id="女"> -->
            性别:
            <input type="radio" name="sex" value="男" id="">男
            <input type="radio" name="sex" value="女" id="" checked>女
        </p>
        <p>
            <!-- checked：默认被选中 -->
            血型：
            <input type="radio" name="bloodtype" id="" checked>A
            <input type="radio" name="bloodtype" id="">B
            <input type="radio" name="bloodtype" id="">AB
            <input type="radio" name="bloodtype" id="">O
        </p>
        
        <!-- HTML5写法：不需要for -->
        <p>
            <!-- label：将字和单选按钮绑定，用户点击文字也视为点击单选按钮 -->
            性别HTML5:
            <label>
                <input type="radio" name="sex1" value="男" id="">男
            </label>
            <label>
                <input type="radio" name="sex1" value="女" id="" checked>女
            </label>
        <p>
        <!-- HTML4写法：男女要写在label里 -->
        </p>
            性别HTML4:
            <input type="radio" name="sex2" id="nan"><label for="nan">男</label>
            <input type="radio" name="sex2" id="nv" checked><label for="nv">女</label>
        </p>

        <!-- 复选框 -->
        <!-- 同组复选框name值相同 -->
        <!-- 复选框要有value属性值，向服务器提交的就是value值 -->
        <p>
            爱好：
            <label>
                <input type="checkbox" name="hobby" id="" value="篮球">篮球
            </label>
            <label>
                <input type="checkbox" name="hobby" id="" value="羽毛球">羽毛球
            </label>
            <label>
                <input type="checkbox" name="hobby" id="" value="跳舞">跳舞
            </label>
            <label>
                <input type="checkbox" name="hobby" id="" value="唱歌">唱歌
            </label>
            <label>
                <input type="checkbox" name="hobby" id="" value="游泳">游泳
            </label>
        </p>
    </form>
</body>
</html>

提交/点击按钮具体区分：
表单中提供了三个按钮，分别是
< button ></ button >
<input type="“button">
<input type=“submit" >
那么按钮有三个，我该用哪个?

<button></button>按钮，按钮上的提示文字，要写在起始标签和闭合标签之间，如下:
而input形式的两个按钮，提示文字都要通过value属性来设置，如下:
<button></button>按钮，起始标签和闭合标签之间不仅可以写文字，还可以写其他内容，比如设置一张图片:
而input的两个标签则无法插入图片
写在form标签中时，<button></button>按钮和<input type="submit">按钮有提交表单的功能。以< input type="submit">按钮为例，结构如下:
当点击按钮时，在谷歌浏览器上，浏览器顶部的刷新按钮会转一下(提交表单)

而<input type="button">这个按钮则没有该能力。注意事项:
</button>按钮，可以设置type属性，当添加type属性时，它就不具备提交表单的能力了(了解即可):

二、如何选择使用哪一个按钮

由于页面布局具有多样性，实现方式并不唯一。当三个按钮都能实现效果时，那么选择哪一个都行。当然也可以根据实际情况选择，例如:

如果想要一个图片形式的按钮，那么优先考虑< button>按钮
如果想利用form标签提交数据，那么按钮优先考虑< button>和type为submit的按钮
如果不想利用form标签提交数据，那么可以优先考虑选择type为button的按钮

三、补充说明

实际开发中，按钮往往还可以使用其他标签来实现，比如a标签。
后面我们会学习css，学会后，我们就可以利用css代码改变a标签的样式，让其变成一个按钮的形状。所以布局时，可以大胆的尝试去使用标签。
如果自己不知道使用什么标签合适，那么可以打开一些网站，通过审查元素，查看这些网站中，使用了什么标签，然后仿照着去写。

按钮选择

图片形式的按钮, 使用`<button>`

需要提交数据的时候使用`<button>或者<input type = "submit">`

不需要提交的时候使用`<input type = "button" />`

更丰富的input种类

HTML5新增的表单类型有：color、date、time 、email、file、number、range、search、url。

type属性值	控件
color	颜色选择控件
date、time	日期时间选择控件
email	电子邮件输入控件
file	文件选择控件
number	数字输入控件
range	拖拽条
search	搜索框
url	网址输入控件