前端学习之HTML——（5）

最新推荐文章于 2024-10-01 16:34:30 发布

努力编程的阿曼

最新推荐文章于 2024-10-01 16:34:30 发布

阅读量37

点赞数

分类专栏：前端学习文章标签：前端学习

本文链接：https://blog.csdn.net/qq_62965644/article/details/132513555

版权

前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、表单与提交

什么是表单？

例如一个网站中登录页面，需要输入用户名和密码，这就是一个表单。而我们常用post和get来提交表单

表单对应的标签为form，其中method和action为标签必填的内容，前者表示如何发生表单(post?get?)，后者为向何处发送表单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录注册</title>
</head>
<body>
    <h1>注册</h1>
    <!--input 文本输入框-->
    <form action="我的第一个网页.html" method="get">
        <p>用户名：<input type="text" name="username"></p>
        <p>密码：<input type="password" name="pwd"></p>
        <p>
        <input type="submit">
        <input type="reset">
        </p>
        
    </form>
</body>
</html>

可以看到，使用get方式时，内容会在url中呈现但使用post时ulr中便不会呈现提交内容

2、按钮与多选框

前面的input中的属性有以下几种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录注册</title>
</head>
<body>
    <h1>注册</h1>
    <!--input 文本输入框-->
    <form action="我的第一个网页.html" method="post">
        <p>用户名：<input type="text" name="username"></p>
        <p>密码：<input type="password" name="pwd"></p>
        <p>
        <input type="submit">
        <input type="reset">
        </p>
        <!--单选-->
        <p>
            性别：
            <input type="radio" value="boy" name="sex">男
            <input type="radio" value="girl" name="sex">女
        </p>
        <!--多选框-->
        <p>
            爱好：
            <input type="checkbox" value="A" name="hobby">A
            <input type="checkbox" value="B" name="hpbby">B
            <input type="checkbox" value="C" name="hobby">C
        </p>
        <!--按钮-->
        <p>
            按钮：
            <input type="button" name="btn1" value="点击">
            <input type="image" src="resources/img/test.jpg">
        </p>
    </form>
</body>
</html>