Bootstrap3学习---表单

最新推荐文章于 2023-10-30 20:55:47 发布

一片空白

最新推荐文章于 2023-10-30 20:55:47 发布

阅读量386

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43843911/article/details/89608965

本文介绍了Bootstrap3中的表单设计，包括堆叠表单和内联表单两种布局方式，以及支持的输入控件如input、textarea、checkbox、radio和select。详细讲解了表单控件的使用，并强调了正确声明input类型的重要性。

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

Bootstrap学习——表单

学习网址：
https://www.runoob.com/bootstrap/bootstrap-tutorial.html

一、表单布局
1、Bootstrap3 提供了两种类型的表单布局:
堆叠表单 (全屏宽度)：垂直方向
内联表单：水平方向
2、Bootstrap3表单控件
Bootstrap3 支持以下表单控件：
input
textarea
checkbox
radio
select
注意: 如果 input 的 type 属性未正确声明，输入框的样式将不会显示。
二、固定代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="wiewport" content="width=device-width,initial-scala=1.0">
    <title>Title</title>
    <!--引入Bootstrap-->
    <link rel="stylesheet" href="bootstrap.min.css">
   
</head>
<body>
<div align="center">
   

 <link rel="stylesheet" href="bootstrap.min.js">
    <!--引入jquery文件-->
    <link rel="stylesheet" href="jquery-3.3.1.min.js"
</body>
</html>

2.简单表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html charset=UTF-8">
    <!--引入Bootstrap-->
    <link rel="stylesheet" href="bootstrap.min.css">
    <title>title</title>
    <style>
        .a{
            width: 800px;
            height: 100px;
        }
        #b{
            width: 500px;
           border:10px solid lavender;
            text-align: left;  /*文本左对齐*/
        }
    </style>
</head>
<body>
<div align="center"><div class="head-top"><h1>个人信息</h1></div>
<div id="b">
<form class="form-group">
<div class="container">
    <!--from group 堆叠表单-->
    <div class="form-group">
            <label  for="name">姓名</label>
            <input class="form-control input-lg" type="text" id=name placeholder="请输入姓名">
    </div>
        <div class="form-group">
            <label for="tel">电话</label>
            <input class="form-control input-lg" type="text" id="tel" placeholder="请输入">
        </div>

<div class="form-control">
    <label>性别</label>
    <label class="checkbox">
        <input type="checkbox" value="">男
        <input type="checkbox" value="">女
    </label>
</div>
        <div class="form-group">
            <label >感兴趣的职位：</label>
            <label class="radio"><input type="radio">web设计人员</label>
            <label class="radio"><input type="radio">销售部门经理</label>
            <label class="radio"><input type="radio">大数据架构师</label>
        </div>
</div>
    </form>

               <!--水平表单-->
    <div class="form-inline">
        <div class="form-group">
            <label class="sr-only">薪水</label>
            <input type="text" class="form-control" placeholder="请输入金额">
        </div>
    </div>
    <!--表单控件-->
        <div class="form-group">
            <label for="sel">专业</label>
            <select class="form-control" id="sel">
                <option>计算机科学与技术</option>
                <option>数字媒体</option>
                <option>数学与应用数学</option>
                <option>商务智能</option>
            </select>
        </div>
            <div class="form-group"><label for="comment">工作要求:</label></div>
            <textarea class="form-control"  rows="7" id="comment"></textarea>
        <div class="form-group">
            <button type="submit" class="btn btn-default">提交</button>
        </div>

</div>
    </div>
<!--JQuery (Bootstrap的JavaScript插件引入-->
<script src="jquery-3.3.1.min.js"></script>
<!--包括所有已编译的插件-->
<script src="bootstrap.min.js"></script>
</body>
</html>

结果如下：
在这里插入图片描述