JavaScript简单的表单编写

最新推荐文章于 2023-11-15 20:40:59 发布

原创最新推荐文章于 2023-11-15 20:40:59 发布 · 1.3k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #开发语言

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文展示了一个简单的HTML表单示例，包含活动名称、区域选择、活动时间、活动性质和特殊资源等字段。难点在于区域选择的下拉菜单和日期输入。提供了活动1和活动2两种性质选项，以及资源1和资源2的复选框供用户选择。提交按钮用于提交表单信息。

话不多说直接进入主题请添加图片描述
这是一个简单的表单其中涉及到活动区域时间活动时间性质等
这里其实最大的难度无非就是区域选择和时间的一个生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>表单</title>
</head>

<body>
    <div>
        活动： <input id="username" type="text" placeholder="" 登录>
    </div>
    活动区域： <select name="area">
        <option>--请选择--</option>
        <option value='bj'>北京</option>
        <option value='sh'>上海</option>
    </select>
    <div>
        <label 活动时间：for="meeting">活动时间：</label><input id="meeting" type="date" value="" />
    </div>
    <from>
        活动性质：<input type="radio" name="gender" value="m">活动1
        <input type="radio" name="gender" value="n">活动2
    </from>
    <div class="checkbox">
        <label>
            特殊资源：<input type="checkbox"> 资源1
                    <input type="checkbox"> 资源2
                    
        </label>
    </div>

    <div>
        活动形式:<textarea name="introduce"></textarea>
        <input type="submit" value="提交">
    </div>
</body>

</html>