前端day4-表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>day4-表单</title>
</head>
<body>
    
    <!-- input标签 -->
    文本框,用于输入单行文本:<input type="text"><br>
    密码框: <input type="password"><br>
    单选框,多选一: 
    <input type="radio" name="0">语文
    <input type="radio" name="0">数学
    <input type="radio" name="0">英语
    <br>
    多选框,多选多: 
    <input type="checkbox" name="0">北京
    <input type="checkbox" name="0">天津
    <input type="checkbox" name="0">上海
    <input type="checkbox" name="0">厦门
    <br>
    选择文件,上传文件:<input type="file"><br>
    提交按钮: <input type="submit"><br>
    重置按钮: <input type="reset"> <br>
    普通按钮: <input type="button" value="按钮"><br><br>

    <hr>

    <!-- 占位符placeholder -->
    用户名:<input type="text" placeholder="请输入用户名"><br>
    密码: <input type="password" placeholder="请输入密码">

    <hr>

    <!-- 单选功能和默认选中,同理多选框 -->
    <!-- name:分组 -->
    <!-- checked:默认选中 -->
    学科:
    <input type="radio" name="subject" checked>语文
    <input type="radio" name="subject">数学
    <input type="radio" name="subject">英语

    <hr>

    <!-- 上传多个文件:multiple -->
    上传单个文件:<input type="file"><br>
    上传多个文件:<input type="file" multiple>

    <hr>

    <!-- 按钮 -->
    <!-- 属性value-添加显示文字 -->
    <form>
        用户名:<input type="text" placeholder="请输入用户名"><br>
        密码: <input type="password" placeholder="请输入密码"><br>
        <!-- 提交按钮和重置按钮需要在表单中使用 -->
        <input type="submit">
        <input type="submit" value="免费注册">
        <input type="reset">
        <input type="button" value="注册">
    </form>

    <hr>
    
    <!-- button按钮标签 -->
    <button>按钮</button>
    <button type="submit">提交按钮</button>
    <button type="reset">重置按钮</button>
    <button type="button">普通按钮,没有任何功能</button>

    <hr>

    <!-- select下拉菜单 -->
    <!-- selected:默认选中 -->
    下拉菜单:<br>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option >厦门</option>
    </select>
    <select>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option selected>厦门</option>
    </select>

    <hr>

    <!--textarea文本域,右下角可拖曳改变大小  -->
    <!-- cols:规定可见宽度; rows:规定可见行数 -->
    <textarea cols="30" rows="10"></textarea>

    <hr>

    <!-- label:点击文字可选中 -->
    <!-- 方法一:复杂 -->
    性别:
    <input type="radio" name="sex" id="nan"><label for="nan">男</label>
    <input type="radio" name="sex" id="nv"><label for="nv">女</label>
    <br><br>
    <!-- 方法二:简单 -->
    性别:
    <label><input type="radio" name="sex1">男</label>
    <label><input type="radio" name="sex1">女</label>

</body>
</html>

 

  • 7
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值