表单

74 阅读1分钟

我正在参加[码上掘金挑战赛]详情请看:码上掘金挑战赛来了!

表单

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12 ">
                <form class="form-horizontal" method="post" action="#">
                    <!--表单区域-->
                    <fieldset>
                        <!--表单主题-->
                        <legend>用户注册</legend>
                        <!--每一个form-group都可以自定义布局-->
                        <div class="form-group">
                            <!--label表示文字提示标签,可以通过表单的组建的id提示-->
                            <label class="col-md-2 control-label" for="mid">用户名称</label>
                            <div class="col-md-4">
                                <input class="form-control" id="mid" type="text"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <!--label表示文字提示标签,可以通过表单的组建的id提示-->
                            <label class="col-md-2 control-label" for="password">用户密码</label>
                            <div class="col-md-4">
                                <input class="form-control" id="password" type="password"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <!--label表示文字提示标签,可以通过表单的组建的id提示-->
                            <label class="col-md-2 control-label" for="con">确认密码</label>
                            <div class="col-md-4">
                                <input class="form-control" id="con" type="password"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <!--label表示文字提示标签,可以通过表单的组建的id提示-->
                            <label class="col-md-2 control-label" for="sex">性别</label>
                            <div class="col-md-5">
                                <div class="radio-inline">
                                    <input type="radio" name="sex" id="sex-man" value="man" checked/></div>
                                <div class="radio-inline">
                                    <input type="radio" name="sex" id="sex-woman" value="woman"/></div>
                            </div>
                        </div>

                        <div class="form-group">
                            <!--label表示文字提示标签,可以通过表单的组建的id提示-->
                            <label class="col-md-2 control-label" for="lock">个人爱好</label>
                            <div class="col-md-5">
                                <lable class="checkbox-inline">
                                  <input  id="lock" type="checkbox" value="lock" name="city"/>体育
                                </lable>
                                <lable class="checkbox-inline">
                                    <input  id="lock" type="checkbox" value="lock" name="city"/>音乐
                                </lable>
                                <lable class="checkbox-inline">
                                    <input  id="lock" type="checkbox" value="lock" name="city"/>读书
                                </lable>
                            </div>
                        </div>

                        <div class="form-group">
                            <!--label表示文字提示标签,可以通过表单的组建的id提示-->
                            <label class="col-md-2 control-label" for="city">所在城市</label>
                            <div class="col-md-4">
                                <select id="city" class="form-control">
                                    <option value="sheng">陕西</option>
                                    <option value="si">宝鸡</option>
                                    <option value="si">西安</option> 
                                    <option value="si">咸阳</option>
                                </select>
                             </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-3">
                                <input class="btn btn-primary" value="提交" type="submit"/>
                                <input class="btn btn-warning" value="重置" type="submit"/>
                            </div>
                        </div>               
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</body>

结果

8a890494ec238a994de475bc28c1b4a.png 用的元素form。表单写在form下,form--form-group--label/input(标签)。
内联表单:为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
radio:显示的是垂直排列。
:可以改变html里乱码问题。
margin: 0 auto:外边距,居中;0:上下,auto:左右。
padding:内边距