表单布局 Bootstrap 提供了下列类型的表单布局： 垂直表单（默认） 内联表单 水平表单 垂直或基本表单 基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。...如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 标签添加 class .form-inline。...（Radio） 复选框和单选按钮用于让用户从一系列预设置的选项中进行选择。...下面的实例演示了这两种类型（默认和内联）： 实例 默认的复选框和单选按钮的实例 选项 2 - 选择它将会取消选择选项 1 内联的复选框和单选按钮的实例
，将会和按钮具有相同的目的。...click事件 当按钮表单元素激活的时候，将会触发click事件。（即使是通过键盘而不是通过鼠标，该事件都会触发）。单选框和复选框也具有click事件。...当onclick事件处理程序能概念化为跟随此链接时用一个链接，否则用按钮。 提交和重置元素本就是按钮，不同的是它们有与之相关联的默认动作。 即，按钮和超链接类似，都具有共同的作用。...开关按钮 复选框和单选元素为开关按钮，或称之为有两种视觉状态的按钮。即选中或未选中。通过对其单击，用户可以改变其开关状态。...单选元素为整组有相关性的元素而设计的，组内所有按钮的HTML属性name值都相同。按照这种方式创建的按钮为互斥的。利用表单属性的名字选中元素时，它返回的一个类数组对象而不是单个元素。
a,垂直方向的内容截断: 响应式表格使用了 overflow-y: hidden 属性，这样就能将超出表格底部和顶部的内容截断。特别 是，也可以截断下拉菜单和其他第三方组件。 ...} } 二，表单 1，基本实例：所有设置了 .form-control 类的、 和 元素都将被默认设置宽度属性为 width: 100%;。....form-group也可以； 2，内联表单： 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。...在内联表单，我 们将这些元素的宽度设置为 width: auto;，因此，多个控件可以排列在同一行。根据你的布局需 求，可能需要一些额外的定制化组件。 ...2），输入控件组：如需在文本输入域 前面或后面添加文本内容或按钮控件，请参考输入控件组。 3），文本域：支持多行文本的表单控件。可根据需要改变 rows 属性。
Bootstrap 提供了下列类型的表单布局： 垂直表单（默认） 内联表单 水平表单 吹着表单或基本表单 向父 元素添加 role="form"。...内联表单 如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 标签添加 class .form-inline。...在使用内联表单时，您需要在表单控件上设置一个宽度。 使用 class .sr-only，您可以隐藏内联表单的标签。 效果图： ?...（Radio） 默认的复选框和单选按钮的实例 <input type="checkbox...optionsRadios2" value="option2"> 选项 2 - 选择它将会取消选择选项 1 内联的复选框和单选按钮的实例
type=”submit” value=”登录”/> 注：通过设置value属性改变按钮的默认文字内容 提交按钮和要提交的表单内容必须放在一个form标签中，才能提交 4.重置按钮 语法：的单选按钮添加一致的name属性值，才能达到多选其一的效果 b)设置checked=”checked”,在页面加载完成后添加默认选中项 c)当属性和属性值相同时，可以省略属性值 6.复选按钮 语法...常见内联块状元素：img,input,select,textarea 内联块状元素特点： a) 即具有内联元素特点，在一行逐个进行显示 b) 又具有块状元素特点，可以定义宽度和高度，以及盒模型中的任意属性...value=”login”/> 重置按钮： 单选按钮： 复选按钮：男 注：设置id属性值和for属性值一致产生关联即可达到点击文字选中按钮的效果 b）通过给label标签设置样式达到一定的效果 注：label是一个内联元素 4.表单字段集及表单字段集标题
button(按钮),例：this button submits the from 注意：当你设计表单时，你可以指定某些选项为必填项（requied）,只有用户填写后方可提交表单。...例： radio button(单选按钮)：单选按钮这是input输入框的一种类型，每个按钮都应该嵌套在label（标签）中，并且全部统一 使用name属性。...（type="radio"） 例：Indoor Ind (两个单选按钮) checkboxes(多选按钮)：多选按钮是input的另一种类型，每个按钮都应该嵌套在label（标签）中，并且全部统一 使用...（type="checkbox"） 例：Loving Lov (两个多选框) cheackd属性：设置多选按钮和单选按钮默认被选中。...例： body p 内联样式：当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样 式属性。样式属性可以包含任何 CSS 属性。
Html中绝大多数元素被定义为块级元素或内联元素。 块级元素在浏览器显示时，通常会以新行来开始。例如 div p等 内联元素在浏览器显示时，通常不会以新行来开始。...2.9 HTML表单标签 2.9.1 form标签 标签代表一个表单，表单用于向服务器传输数据。 标签能够包含，可以是文本字段，复选框，单选框或提交按钮等。...根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。...其它常用属性: name:定义标签名称 value:按钮显示名称 reset 定义重置按钮。重置按钮会清除表单中的所有数据。... iframe 元素会创建包含另外一个文档的内联框架（即行内框架） 常用属性: src:定义些框架要显示的页面url name:定义些框架的名称 width:定义些框架的宽度 height
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。...表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。...10"> ---- 21.表单域 表单是由窗体和控件组成的,一个表单一般应该包含用户填 写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件...：提交方式，默认为get ---- 一个完整的表单包含三个基本组成部分： 表单标签、表单域、表单按钮。...（比如：文本域、下拉列表、单选框、复选框等等） (3).表单按钮 用来提交表单中的所有信息到服务器 *表单域和表单按钮都属于表单元素。
常见表单 form 表单, 一般情况下，其他表单相关元素都是它的后代元素 input 单行文本输入框、单选框、复选框、按钮等元素 textarea 多行文本框 select、option 下拉选择框 button...按钮 label 表单元素的标题 3.2. input元素 type text password time date disabled/autofoucs/readonly MDN文档 boolean...) radio:单选框 checkbox:复选框 button:按钮 reset:重置 submit:提交表单数据给服务器 file:文件上传 readonly:只读 disabled:禁用 checked...，值就是属性名本身 3.3. input模拟按钮 表单可以实现按钮效果: 普通按钮(type=button):使用value属性设置按钮文字 重置按钮(type=reset):重置它所属form...的所有表单元素(包括input、textarea、select) 提交按钮(type=submit):提交它所属form的表单数据给服务器(包括input、textarea、select) 我们也可以通过按钮来实现
--水平线--> div标签和span标签 div标签用来定义一个块级元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。 span标签用来定义内联(行内)元素，并无实际的意义。...这两个元素是专门为定义CSS样式而生的。 注意： 关于标签嵌套：通常块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。 p标签不能包含块级标签。...input系列标签，比如文本字段、复选框、单选框、提交按钮等等。...="隐藏按钮" /> file 文本选择框 类型（type）说明： text：文本输入框 password：密码输入框 radio：单选框 checkbox...：多选框 submit：提交按钮 button：可点击的按钮，没有任何行为，一般配合JS使用 hidden：对用户不可见，通常用于修改某条数据时，记录数据的id值 file：提交文件 form表单需要加上
标签表示文本的一个段落，具有整段文本之间相分离的效果。 表单数据会附加在 action 属性的URI中，并以 ‘?’ 作为分隔符，然后这样得到的 URI 再发送给服务器。...button 页面中可点击的按钮，可以配合表单进行提交 type属性值决定按钮类型 1）简单的文本输入框 label标签：表单的说明。...属性值 作用 radio 单选按钮。...在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值；一个单选按钮组中是，同一时间只有一个单选按钮可以被选择。 2. 必须使用 value 属性定义此控件被提交时的值。 3.
2 描述： 块级元素，用于文章标题，无法单独使用，需要跟一个1~6的数字表示标题大小。 常用属性： 无常用。 3 描述： 块级元素，一般用于文本内容。 常用属性： 无常用。...4 描述： 内联元素，单标签，一般用于表单，如输入框、单选框、多选框以及提交按钮。 常用属性： type：指定当前input是什么类型。...5 描述： 内联元素，配合input标签使用，当点击提交按钮后指定要提交表单的方式及发出的请求。 常用属性： action：指定表单发出的请求地址。...method：指定表单提交的方式，post和get其中一种。 6 描述： 内联元素，单标签，用于将图片显示到页面上。 常用属性： src：指定图片当前的路径。...alt：当图片因为某些原因无法显示时，将alt中的文字代替图片显示在页面中。 7 描述： 内联元素，单标签，用于HTML中页面的跳转，要注意此跳转发送给服务器的GET请求。
点此查看相关开源项目 0x2 表单 选项二//关联的关键是ID 这里的选项二可以点击文字达到点击单选框的效果。...按默认样式分 块级 block 行内 inline inline-block 表单、下拉框、输入框 DIV元素 //块级 内联元素内联元素...好巧，我也是内联元素 //行内 下拉框 //inline-block 你猜左边是什么元素 1234 DIV元素 //块级内联元素内联元素好巧，我也是内联元素<
表单标签 表单标签：form标签定义表单（action提交地址，method提交方式[7种，get请求参数在地址栏显示，请求参数长度有限制，安全低 post请求参数封装到请求体中，请求参数无限制，安全高...复选框（也指定name和value，checked默认选中），value值，name属性指定的标签数据才能提交）， file选中文件，hidden隐藏域，看不到但会提交，submit提交，image图片提交按钮...拓展选择器：*表示选择所有元素，并集选择器（选择器1,选择器2{}），子选择器（选择器1 选择器2{}选择元素1下的元素2），父选择器（父标签 > 子标签{}，作用于父标签） 属性选择器（元素名[属性名...=属性]{}，选中有该属性的标签），伪类选择器，选择一些元素具有的状态，格式如：XXX（如a等标签）:输入关键字（如link初始化状态，visited访问过，hover悬浮，active正在访问等属性）...vertical-alien垂直样式， 盒子模型：控制布局。margin外边距（复合属性，auto居中）（相对于当前的对象），padding内边距（相对于当前的对象）。
> 3.块标签 div标签在文档中设置一个块区域 span标签(内联元素) 在行内设置一个块区域 4.字体标签 标签:用于规定文本的字体,大小,颜色 属性: face:规定文本字体类型 size...二.表单标签: 标签:代表一个表单,表单用于向服务器传输数据 标签能够包含;可以是文本字段,复选框,单选框或是提交按钮.还可以包含,<select...value:定义标签值(默认值) size:定义输入字段的长度(密码框的宽度) maxlength:定义可输入最大的字符个数 radio:定义单选按钮(单选框或者单选按钮...-- input 标签 当type=”button“时 为普通按钮 value： 按钮上显示的文本 作用：不具有任何功能的普通按钮。...:定义框架大小不可以改变. marginhight:定义框架高度部分边缘所保留的空间. marginwidth:定义框架宽度部分边缘所保留的空间. 2.iframe 元素会创建包含另外一个文档的内联框架
表单的构件解析 标签 标签即可以理解为标题的意思，用简洁的文字让用户知道应该输入的内容；根据标签的所属位置，大致可以分为：顶部标签、左对齐标签、右对齐标签、内联标签、图标标签以及浮动标签，下面我们主要介绍前三个...顶部标签 与输入域左垂直对齐 优点：节省水平空间，标签长度弹性大，可以加快浏览和处理速度。 缺点：垂直空间占用比较大，表单项多时需增加页面滚动。...左对齐标签 文字左对齐放置在输入域的左边 优点：文字开头按阅读视线对齐，方便用户快速浏览表单；节约垂直空间。 缺点：标签与表单域联系不紧密，视觉跳动大，填表不流畅；标签和输入域的弹性长度小。...由于大家对大部分类型都很熟悉了，我就选择几个大家可能容易忽略的说一说 选择框和复选框(单选框)的选择 当项数比较少的时候，复选框(单选框)是一个更优解；选项全部都列出来，可以按重要程度排列，方便用户查看对比...可优化的点 当表单的必填项未填写完整时，提交或保存等主按钮一般为灰色状态，不可进行下一步操作，当完成必填信息的填写后，按钮变为高亮，可进行下一步操作（但表单项超过5个时则不建议使用主按钮禁用原则）。
"> Body标签 1.块级标签和内联标签 block（块）元素的特点 ① 总是在新行上开始； ② 高度，行高以及外边距和内边距都可控制； ③ 宽度缺省是它的容器的100%，除非设定一个宽度。...④ 它可以容纳内联元素和其他块元素 inline（内联）元素的特点 ① 和其他元素都在一行上； ② 高，行高及外边距和内边距不可改变； ③ 宽度就是它的文字或图片的宽度，不可改变 ④ 内联元素只能容纳文本或者其他内联元素...（以下属性text和password共有） size（指定表单元素的初始宽度。...placeholder 框内预置内容(灰色)，写上内容时才消失 radio 单选按钮。...用于提交表单。 reset 重置按钮。清空表单的输入，恢复到表单默认的状态。 button 普通按钮。一般结合javascript使用。 文本域标签。
要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。 2....可以提交表单 * button：普通按钮 * image：图片提交按钮 * src属性指定图片的路径 * label：...选择器：筛选具有相似特征的元素 * 分类： 1....元素选择器：选择具有相同标签名称的元素 * 语法： 标签名称{} * 注意：id选择器优先级高于元素选择器 3....类选择器：选择具有相同的class属性值的元素。 * 语法：.class属性值{} * 注意：类选择器选择器优先级高于元素选择器 2.
行内元素 字体倾斜 比较重要的字体倾斜 「测试游记」 「测试游记」 ?...表格 form表单 简单的编写一个flask测试页面 from flask import Flask app = Flask(__name__) @app.route('/') def index...重置按钮 输入内容后，点击重置会把填入的内容清空 图片按钮 点击图片后会提交 <input type="image" src="pic.JPG" height="300px" width="150px...image-20190828214000856 隐藏表单域： 表单域" > 提交的内容：http://127.0.0.1...user=&pwd=&hello=&csrf=隐藏表单域&city=0 city=0 iframe 内联框架 iframe元素会创建包含另外一个文档的内联框架(行内框架) 例子：将其他页面的内容链接到当前页面
要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。 2....可以提交表单 * button：普通按钮 * image：图片提交按钮 * src属性指定图片的路径 * label：指定输入项的文字描述信息...选择器：筛选具有相似特征的元素 * 分类： 1....元素选择器：选择具有相同标签名称的元素 * 语法： 标签名称{} * 注意：id选择器优先级高于元素选择器 3....类选择器：选择具有相同的class属性值的元素。 * 语法：.class属性值{} * 注意：类选择器选择器优先级高于元素选择器 2.
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
