HTML--表单控件-表单提交数据

表单控件

<!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>
    <div>
         <!-- 关联 -->
        <label for="username">账号:</label>
        <input id="username" type="text" placeholder="用户名不能超过16位"><br>
    </div>
    <div>
        <label for="password">密码:</label>
        <input id="password" type="password" ><br>
    </div>
    <div>
        <!-- 单选按钮 -->
        <!-- checked 默认选项 -->
        性别:<input name="gander" checked type="radio"><input name="gander" type="radio"></div>
    <div>
        <!-- 复选按钮(多选) -->
        爱好:<input type="checkbox">游戏
            <input type="checkbox">运动
    </div>
    <div>
        上传文件:<input type="file">
    </div>
    <div>
        <!-- 下拉菜单 -->
        班级:
        <select name="" id="">
            <option value="">---请选择---</option>
            <option value="">AID2005</option>
            <!-- selected默认选中 -->
            <option selected value="">AID2006</option>
        </select>
    </div>
    <div>
        <!-- 文本域 -->
        其他:<textarea name="" id="" ></textarea><br>
        建议:<textarea name="" id="" cols="30" rows="10"></textarea>
    </div>
    <div>
        <!-- 按钮 (普通按钮,提交,重置)-->
        <input type="button" value="普通按钮">
        <input type="submit">
        <input type="reset">
    </div>
</body>
</html>

在这里插入图片描述

表单提交数据

<!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>
    输入框:
    <!-- action="http://www.baidu.com/s"域名 method="GET" host-->
    <form action="http://www.baidu.com/s" method="GET">
        <!-- type="text" name="wd"  text是文本格式,name=wd是KEY  -->
        <input type="text" name="wd">
        <!-- type="submit" value="百度一下"  点击百度一下进行提交 -->
        <input type="submit" value="百度一下">
    </form>
    <br>
    单选:
    <form action="">
        <div>
            <!-- 同一个name不是一个value,属性是type="radio"属于单选 -->
            <input name="answer" value="A" type="radio">A
            <input name="answer" value="B" type="radio">B
            <input name="answer" value="C" type="radio">C
        </div>
        <input type="submit">
    </form>
    <br>
    多选:
    <form action="">
        <div>
            <!-- 同一个name不是一个value,属性是type="checkbox"属于多选 -->
            <input name="answer" value="A" type="checkbox">A
            <input name="answer" value="B" type="checkbox">B
            <input name="answer" value="C" type="checkbox">C
        </div>
        <input type="submit">
    </form>
    <br>
    下拉框:
    <form action="">
        <select name="select" id="">
            <option value="None">--请选择--</option>
            <option value="baidu">百度</option>
            <option value="sougou">搜狗</option>
        </select>
        <input type="submit">
    </form>



</body>
</html>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

z千鑫

在线乞讨,行行好吧!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值