【20220925】 html 表单

最新推荐文章于 2024-08-06 18:58:51 发布

zhangzhangxinya

最新推荐文章于 2024-08-06 18:58:51 发布

阅读量112

点赞数 1

分类专栏： html 文章标签： html5

本文链接：https://blog.csdn.net/weixin_44931575/article/details/127043900

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

`form`表单

1.笔记

<body>
    <h1>登录</h1><hr>
   
    <!-- 文本text -->
    账号：<input type="text"><br><br>
   
    <!-- password这是密码 出来的是小黑点 -->
    密码：<input type=password" name="" id=""><br><br>
   
    <!-- radio 单选框用于多选一 -->
      男<input type="radio" name="sex"><br><br>
      女<input type="radio" name="sex"><br><br>
    
      <!-- checkbox多选框 -->
    <input type="checkbox" name="" id=""><br><br>
    
    <!-- file 上传文件-->
    <input type="file" name="" id=""><br><br>

    <!-- mutiple上传多个文件 -->
    <input type="mutiple" name="" id="">

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

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

    <!-- button 普通按钮，无特殊功能-->
    <input type="button" name="" id="">
</body>

2.练习

页面示例：
在这里插入图片描述
代码实现：

<body>
    <h2>创建活动</h2>
    <hr>
    <form action="">
    活动名称：<input type="text" name="" id="" placeholder="请输入活动名称">
    <br>
    <br>
    活动区域：<select name="" id="">
        <option value="">请选择活动区域</option>
        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">深圳</option>
    </select>
    <br>
    <br>
    活动时间：<input type="datetime-local">
    <br>
    <br>
    即时配送：<input type="checkbox" name="" id="" checked>
    <br>
    <br>
    活动性质：<input type="checkbox" name="" id="">美食/餐厅线上活动
    <input type="checkbox" name="" id="">地推活动
    <input type="checkbox" name="" id="">线下主题活动
    <input type="checkbox" name="" id=""> 单纯品牌曝光
    <br>
    <br>
    特殊资源：<input type="radio" name="" id="" checked>线上品牌商赞助
    <input type="radio" name="" id="">线下场地免费
    <br>
    <br>
    上传文件：<input type="file" multiple>
    <br>
    <br>
    电子邮件：<input type="email">
    <br>
    <br>
    电话号码：<input type="tel" name="" id="">
    <br>
    <br>
    <input type="submit" value="立即创建">
    <input type="reset">
    <br>
    <br>
    <button type="submit">立即创建</button>
    <button type="reset">重置</button>
</form>
</body>