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>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/zhouzongxin94/article/details/119699987