Bootstrap提交表单基本组件

最新推荐文章于 2024-07-29 21:58:22 发布

原创最新推荐文章于 2024-07-29 21:58:22 发布 · 477 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #html

Bootstrap 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用Bootstrap创建一个美观且功能齐全的HTML表单，包括文本输入、密码输入、邮箱输入、日期选择以及文件上传，配合不同按钮样式，便于前端开发者快速构建用户界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap提交表单基本组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <link rel="stylesheet " href="static/css/bootstrap.min.css">
</head>
<body>
<form role="form">
    <div class="form-group">
        <label>用户名：</label>
        <input type="text" class="form-control" placeholder="user"style="width: 250px">
        <label>密码：</label>
        <input type="password" class="form-control" placeholder="password" style="width: 250px">
        <label>email：</label>
        <input type="email" class="form-control" placeholder="Email" style="width: 250px">
        <label>日期：</label>
        <input type="date" class="form-control" placeholder="date" style="width: 250px">
    </div>
    <hr/>
    <div class="form-group">
        <label>选择文件</label>
        <input type="file" class="form-control" placeholder="选择需要的文件" style="width: 250px">
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">提交</button>
        <button type="button" class="btn btn-info">登录</button>
        <button type="button" class="btn btn-warning">撤销</button>
    </div>
</form>

</body>
</html>

实现效果：
在这里插入图片描述