表单控件-文本-下拉框-文本域-多选框-单选框-button-a标签等变成button

最新推荐文章于 2022-04-27 11:12:38 发布
最新推荐文章于 2022-04-27 11:12:38 发布
阅读量182 收藏
点赞数
分类专栏： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38191971/article/details/113748531
版权 
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用样式</title>
    <link rel="stylesheet" type="text/css" href="{% static 'dist/css/bootstrap.css' %}"/>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-3 text-justify">
             {#                文本#}
                <p><label>name:</label><input type="text" name="uname" class="form-control"/></p>
                <p><label>passward:</label><input type="password" name="pwd" class="form-control"/></p>
{#                下拉框#}
                <p><select class="form-control">
                    <option>请选择城市</option>
                    <option>上海</option>
                    <option>北京</option>
                </select></p>
                 {#                文本域#}
                <p><textarea class="form-control"></textarea></p>
                {#                多选框垂直#}
                <p>
                <div class="checkbox">
                    <label><input type="checkbox" name="hobby"/>sing</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" name="hobby"/>dance</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" name="hobby"/>draw</label>
                </div>
                </p>
                {#                多选框水平#}
                <p>
                <div class="checkbox">
                    <label class="checkbox-inline"><input type="checkbox" name="hobby"/>SING</label>
                    <label class="checkbox-inline"><input type="checkbox" name="hobby"/>DANCE</label>
                    <label class="checkbox-inline"><input type="checkbox" name="hobby"/>DRAW</label>
                </div>
                </p>
                {#               单选框垂直#}
                <p>
                <div class="radio"><label><input type="radio" name="sex"/>male</label></div>
                <div class="radio"><label><input type="radio" name="sex"/>female</label></div>
                </p>
{#                单选框水平#}
                <p>
                    <label class="radio-inline"><input type="radio" name="sex"/>boy</label>
                    <label class="radio-inline"><input type="radio" name="sex"/>girl</label>
                </p>
			<p>
                <button class="btn btn-danger">button</button>
                <button class="btn btn-success">button</button>
                <button class="btn btn-warning">button</button>
                <button class="btn btn-primary">button</button>
                <button class="btn btn-info">button</button>
                <button class="btn btn-default">button</button>
                <button class="btn btn-link">button</button>
            </p>
            {#            把其他标签变成按钮#}
            <p>
                <a href="#" class="btn btn-success">a标签</a>
                <span class="btn btn-danger">span标签</span>
            <div class="btn btn-warning">div标签</div>
            </p>
            <p>
                <button class="btn btn-danger ">button</button>
                <button class="btn btn-danger btn-sm">button</button>
                <button class="btn btn-success btn-lg">button</button>
                <button class="btn btn-warning btn-xs">button</button>
            </p>
            <p></p>



        </div>
    </div>
</div>
</body>
</html>
南栀子。
关注
专栏目录
HTML通俗易懂—表单标签+表单元素（input输入表单元素+select下拉列表+textarea文本域元素）+相应案例
weixin_45586870的博客
09-29 1303
现实中的表单： 1、表单的组成 在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。 （1）表单域 表单域是一个包含表单元素的区域。 在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。 <form> 会把它范围内的表单元素信息提交给服务器。 <form action=“url地址” method=“提交方式” name=“表单域名称"> 各种表单元素控件 </form> 基础
什么标签用于在表单中构建复选框_前端学习笔记一一HTML表单标签（form）
weixin_28679635的博客
12-30 2152
form表单细节一、表单1.表单 标签用于为用户输入创建 HTML 表单2.表单能够包含input 元素，比如文本字段、复选框、单选框、提交按钮等等。3.表单还可以包含menus、textarea、fieldset、legend和label 元素。4.表单用于向服务器传输数据。二、表单form 的属性(一)action属性action 属性规定当提交表单时，向何处发送表单数据属性值：url...
textBox下拉框，多选，单选自定义控件
02-14
textBox下拉框，多选，单选自定义控件：可根据数据源自动生成下拉框，Checkbox或radio两种，支持键盘全方向操作，支持默认项，支持显示文本与实际值不同，特别适合数据录入类软件开发
html自定义单选框按钮,CSS3 自定义样式的单选框按钮
weixin_34614567的博客
06-03 239
CSS语言：CSSSCSS确定* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}html,body {height: 100%;}html {background: #444;background: -webkit-radial-gradient(center, circle,...
常见表单标签 多选按钮 单选按钮 下拉框 文本域
a520songhai的博客
07-05 907
多选按钮 &lt;input type="checkbox" name="vehicle" value="Car" checked="checked" /&gt; I have a car 单选按钮 &lt;input id="man" type="radio" checked="checked" name="1" /&amp
下拉多选框，下拉多选框，input下拉弹出复选框多选
08-04
下拉多选框，下拉多选框，input下拉弹出复选框多选，多选下拉框
ui组件之input多选下拉实现方法（带有搜索功能）
12-29
我的风格，先上效果图，如果大家感觉还不错，请参考实现代码。 废话不说 先看div层次结构 <!-- 最外层div 可以任意指定 主要用于定义子元素宽度 --> <div class=col-xs-10 xss=removed> <!-- 表单label 添加文字提示 --> <label xss=removed class=label-control>全文检索</label> <!-- 多选承接div 以后会动态添加span --> <div class=hint-input-span-container> <!-- 表单元素 用来绑定监听事件以及接收用户输入 该层
Java GUI编程（Swing）【标签（图标放在标签上或图片放在标签上） 面板（含有右边的滚动框） 按钮（图标按钮 单选按钮 多选按钮） 列表框（下拉框）文本框（密码框 文本域）】
createcoder的博客
04-27 2045
目录一 标签（图标放在标签上或图片放在标签上）图标的单词 ICon重点：不要混淆标签和按钮 标签和按钮的区别： Label是一些基础组件，它必须置于某个容器里，类似于窗花、剪纸，必须置于窗户的表面 自己的理解：标签（lable）直接是一个按钮可以点击 周围之间没有用方格框起来 可以直接点击使用 而按钮是定义完按钮 要给按钮定义命名 而且命名周围有方格框起来 也可以点击使用练习一将图标放在标签上（或者是放在按钮上）label1.setHorizontalAlignment(SwingConstants.CE
Bootstrap 框架-表单
moduzhang的博客
08-10 1065
&lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"&gt; 基础表单 表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控...
HTML-Label-框架-字符实体-全局属性-CSS基本语法结构
weixin_57218747的博客
04-30 404
HTML-Label-框架-字符实体-全局属性-CSS基本语法结构 1 回顾 1.1 列表 ul ol li dl dt dd 1.2 表格 table caption thead tfoot tbody tr th td 2 表单 2.1 表单总体设置 <!--表单--> <form action="http://www.baidu.com/s" target="_blank"> <!--输入框--> <input type="text" n
a标签做按钮效果，并实现单选效果
花开空白
02-15 7323
效果图： css代码： .my_link_button { display: block; width: 100px; height: 30px; background: #FFFAFA; margin-top: 20px; font-size: 8px; text-decoration:none; text-align: ...
方便快速的创建一个Button
weixin_30654583的博客
07-18 105
崇拜大牛吗？ 每天进步一点点， 明天你就是自己曾经崇拜的那只大牛。。。。。。 在开发过程中，为了方便快捷的编写代码 ，代码整合，化简是最平凡不过的了。 为了缩减那一遍遍重复的代码，我们可以把它们放到一块宏定义下，当然如若你不忙，天天守着那几行代码，你也可以一直用ctrl+c ，ctrl+v 因为是自定义UIButton 所以要尽可能的简便，用来顺手，那我就没有用Category，而...
ui组件——多选下拉input的实现（带有搜索功能）
caoxun03的博客
07-13 6958
先上效果图 废话不说 先看div层次结构<!-- 最外层div 可以任意指定 主要用于定义子元素宽度 --> <div class="col-xs-10" style="width:800px"> <!-- 表单label 添加文字提示 --> <label for="" class="label-control">全文检索</label>
form表单 input textarea 下拉框及display
zhangli2513的博客
08-02 2703
1、表单的作用 1.显示、收集用户信息 2.将收集到的信息提交给服务器 2、表单语法 语法：form /form 注意：表单中的内容是可以提交给服务器的，提交给服务器的内容要放在表单元素里表单属性： action:表单提交时的动作，提交地址，值为url，默认值为本页 method：提交方式，常用取值：get或post get（默认值）：明文提交，
HTML单选、多选、按钮、下拉框、文本输入框
热门推荐
郭大侠的专栏
03-16 5万+
男 女 宝马 梅赛德斯奔驰 别克 雪佛兰 //预选设置 大众 福特 说点什么吧。。。
Button按钮下拉菜单
weixin_44545643的博客
06-27 1077
Button按钮的下拉菜单是用popup控件完成的。Popup控件是一个弹出式控件。Button下拉菜单就是点击button按钮的时候在按钮下方出现一个类似下拉框的下拉菜单，就像图下的效果： 代码如下： 还有一些就是popup标签的属性， IsOpen: 布尔值,指示 Popup 控件是否显示 StaysOpen: 布尔值,指示在 Popup 控件失去焦点的时候,是否关闭 Popup 控件的显示 PopupAnimation:指示显示窗口时是否使用动画,只有在 AllowsTransparency 等于
文本框改造之多选下拉控件
weixin_30455661的博客
07-12 314
因客户需求，所以做了一个多选下拉控件，做之前在网上搜了各种多选下拉，包括jQuery.multiselect和一些大神写的dll控件。 但是，没用起来，没用起来，没用起来。重要的事情说三遍。 原因有二： 一、jQuery.multiselect的各种引用搞乱了套，为了不影响系统现在的平衡，所以只能作罢。因为该项目已经处于维护阶段，不想改那么多。 二、dll的控件源码看不懂，也不想看。 当...
Vue CLI + Element-UI：修复多选下拉框验证问题
"该资源主要解决了在Vue CLI和Element-UI框架下，使用Element的多选下拉框（el-select）进行表单验证时遇到的一个常见问题，即多选下拉框在页面初次加载时自动触发验证的问题。" 在Vue.js开发中，Element-UI是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值