HTML保姆级教程（三）表单标签

悟空

已于 2022-03-16 15:54:46 修改

阅读量384

点赞数 5

分类专栏： # 网页基础文章标签： html 前端 css

于 2022-02-22 14:31:49 首次发布

本文链接：https://blog.csdn.net/m0_50991874/article/details/123067260

版权

网页基础专栏收录该内容

10 篇文章 2 订阅

订阅专栏

📒博客主页：悟空的博客主页
🎉欢迎关注🔎点赞👍收藏⭐️留言📝
🙉作者简介：一只还在学本领的石猴 🐵
👀关注公众号【悟空信条】，简历模板、学习资料、面试题库等通通分享🎁
🙏作者水平很有限，如果发现错误，一定要及时告知作者哦！感谢感谢！🚤

已完结：《HTML看这一篇就够了》

📌导航小助手📌

（八）表单标签

（八）表单标签

表单是将用户输入的信息封装提交给服务器，实现与用户的交互。表单是用＜form＞标记定义的。

这是表单标签的一些属性，大致看下即可，不理解没关系，接着往下看，后面看看举例就知道了

在这里插入图片描述
常用的表单标签

1）文本框与密码框

1.文本框与密码框

代码：

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>表单示例</title> 
    </head>
    <body>
    
    <form action="">
        姓名: <input type="text" name="userName"><br>
        密码: <input type="password" name="password">
    </form>
    
    
    </body>
</html>

type属性决定表单类型
上面是文本框，下面是密码框

效果图：在这里插入图片描述

name的作用这里理解为定义一个变量名（其实不是），比如定义一个userName变量和password变量用来接收用户框和密码框内的键入值

2）单选按钮与复选框

2.1单选框

代码：

`<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>表单示例</title> 
    </head>
    <body>
    
    <form action="">
        姓名: <input type="text" name="userName"><br>
        密码: <input type="password" name="password">
    </form>
    
    
    </body>
</html>`

效果图：在这里插入图片描述

name会获取value的值male，然后action程序处理name值进行后续操作（action是标签的属性）

2.2复选框

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <input type="radio" name="sex" value="male">男<br>
        <input type="radio" name="sex" value="female">女
    </form>
</body>
</html>

效果图：在这里插入图片描述

3）按钮

代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单示例</title>
    </head>
    <body>
        <form>

            姓名: <input type="text" name="user">
            <input type="button" value="普通按钮" >
            <input type="submit" value="提交">
            <input type="reset" value="重置" >
            <imput type="button" value="关闭" onclick="window.close()"/>
        </form>
    </body>
</html>

效果图：
在这里插入图片描述

4）文件域

代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单示例</title>
    </head>
    <body>
        <form action="后续处理网页.html" method="post" enctype="multipart/form-data" >
            选择上传的文件：<input type="file" name="filename"><br>
            <input type="submit" value="提交">
        </form>

    </body>
</html>

enctype="multipart/form-data"表单信息提交的编码方式

效果图：
在这里插入图片描述

5）下拉列表

代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <form action="" method="post" >
            年龄区间：
            <select size="2" multiple>
                <option>18岁以下</option>
                <option>18-28岁</option>
                <option>28-38岁</option>
                <option>38岁以上</option>
            </select>
        </form>
    </body>
</html>

效果图：在这里插入图片描述

当size="1"时

效果图：在这里插入图片描述

6）文本区

代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <textarea name="" rows="5" cols="20">
            今天是我们学习HTML的第一天，同样也是最后一天哦，这教程真棒，学完就可以实战了
        </textarea>
    </body>
</html>