表单控件学习展示 - 中文网前端作业

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

首页 > 博客列表 > 表单控件学习展示

博主信息

博文 6

粉丝 0

访问量 4172

专题推荐

更多>

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" id="biaodan">
<!-- 文件上传 -->
<section>
    <label for="wjsc">文件上传</label>
    <input type="file" id="wjsc" name="wjsc">
    <!-- 限制上传文件大小 -->
    <input type="hidden" name="MAX_FILE_SIZE" value="8388608">
</section>
<hr>
<!-- 预定义符合框 简直不要太实用-->
    <section>
        <label for="yg">银行卡信息</label>
        <input type="text" name="yg" list="ygs" id="yg">
        <datalist id="ygs">
            <option value="洪千-|64433323231313213"></option>
            <option value="张三-|64432424233121213"></option>
            <option value="龙杰-|64432493242424563"></option>
            <option value="康康-|64432425675675773"></option>
            <option value="刘哥-|64432498679706433"></option>
        </datalist>
    </section>
    <hr>
    <section>
        <label for="age">年龄</label>
        <input type="number" id="age" max="99" min="10" value="10">
    </section>
    <hr>
    <!-- 按钮 -->
    <!-- formmethod：提交方式
         formaction：提交地址 
        表单中存在多个按钮时指定 
        如只有一个按钮 只需在form标签中指定即可
        -->
        <section>
        <label for="dl"></label>
        <button formaction="login.php" formmethod="post" id="dl">登录</button>
        </section>
<hr>
<!-- 下拉框 -->
<section>
    <label for="xlk">下拉框:</label>
    <select name="xlk" id="xlk">
        <!-- 下拉分组 -->
        <optgroup label="分组1">
            <option value="1">我是1.1</option>
            <option value="2">我是1.2</option>
            <option value="3">我是1.3</option>
        </optgroup>
        <optgroup label="分组2">
            <option value="4">我是2.1</option>
            <option value="5">我是2.2</option>
        </optgroup>
    </select>
</section>
<br>
<br>
<br>
<hr>
        <!-- 文本域 -->
        <section>
            <label for="wby">文本域</label>
            <textarea 
            name="wby"
            id="wby" 
            cols="30" 
            rows="10" 
            minlength="5"
            maxlength="100"
            placeholder="框内提示字符"
            onchange="alert('修改内容时触发')"
            onselect="alert('被选中时触发')"
            ></textarea>
        </section>
    </form>
    <!-- 表单分组 -->
    <fieldset name="base" form="biaodan">
        <legend>表单分组</legend>
        <section>
            <label for="email">邮箱</label>
            <input type="email" name="email" id="email">
        </section>
    </fieldset>
</body>
</html>