H5~表单

最新推荐文章于 2022-01-13 07:00:00 发布

时光后-白痴痴

最新推荐文章于 2022-01-13 07:00:00 发布

阅读量1.8k

点赞数 2

分类专栏： H5学习文章标签：表单

本文链接：https://blog.csdn.net/baiccnymyh/article/details/77994994

版权

H5学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

    </style>
</head>
<body>
<!-- 
表单
action：后台地址
method：请求方式 get/ post，post请求更安全
 -->
 <form action="http://www.baidu.com" method="get">
    <span>用户名：</span>
    <!-- 后台通过 name 作为key 取得你传递的value -->
    <!-- 文本输入框 -->
    <input type="text" value="donyuxin" placeholder="请输入用户名" name="username">
    <span>密码</span>
    <!-- 密码输入框 -->
    <input type="password" name="password">

    <!-- 
    单选框 
    name值必须相同
    -->

    <span>男：</span>
    <input type="radio" name="sex">
    <span>女：</span>
    <input type="radio" name="sex">
    <br>

    <!-- 复选框 -->
    <p>兴趣爱好：</p>
    <span>读书：</span>
    <input type="checkbox" name="">
     <span>听音乐：</span>
    <input type="checkbox" name="">
     <span>打篮球：</span>
    <input type="checkbox" name="">
     <span>撩妹：</span>
    <input type="checkbox" name="">

    <!-- 下拉选择框 -->
    <p>你喜欢的类型</p>

    <select>
        <option>萝莉型</option>
        <option>御姐型</option>
        <option>高冷女神</option>
    </select>

    <!-- 文件上传 -->
    <p>请上传你的靓照</p>
    <input type="file" name="">

    <!-- 可输入的区域 -->
    <p>请留言：</p>
    <textarea></textarea>

    <!-- 重置按钮 -->
    <input type="reset" name="">

    <!-- 按钮 -->
    <input type="button" value="抽奖">

    <!-- 提交按钮 -->
    <input type="submit" name="提交" >

 </form>
</body>
</html>