您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

Form表单的简单使用

Form表单的简单使用

  • 简介

表单是一个包含表单元素的区域,用于搜集不同类型的用户输入。表单元素是允许用户在表单中(比如:文本域、下拉框、单选框、复选框等等)输入信息的元素。表单使用表单标签<form>定义。

 

  • 布局

完成布局的第一步:创建一个新的项目。

第二步:把我们需要的文件引入进去。

主要有这三个:

 

可通过栅格系统进行布局

Bootstrap提供了一些表单控件样式、布局选项、以及用来创建广泛多样化的表单的自定义组件。

 

  • 表单控件

1.文本控件(如<input>、<select>、<textarea>)统一采用.form-control样式进行处理优化,包括常规外观,focus选(点)中状态、尺寸大小等。

 

 

2.对于input文件选择控件,Bootstrap v4采用 .form-control-file取代了 .form-control。

  1. 大小规格

使用 .form-control-lg和 .form-control-sm属性来定控件大小高度。

 

2.只读属性

在input控件上增加readonly(布尔值)标签定义,以防止修改input中的值。仅能阅读的input控件显示较淡(就像禁用的输入框),但保留鼠标效果。

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

 

3.只读纯文本

如果要将<input readonly>属性进一步处理,显示为纯文本(没有控件框),你只要引用 .form-control-plaintext  class样式,就能移除预设的表单样式,并保留适当的边距和填充间隙。

  • 输入范围

使用设置水平滚动条范围输入 .form-control-range。

 

 

 

  • 输入

多数情况下被用到的表单标签是输入标签(<input>)。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

1、文本域(text)

当用户要在表单中输入字母、数字等内容时,就会用到文本域。

<form>

First name:

<input type=”text” name=”firstname” />

<br/>

Last name:

<input type=”text” name=”lastname” />

</form>

显示如下:

 

2.单选框和复选框

使用 .form-check可以格式化单选框和复选框按钮,用以改进它们的默认布局和动作呈现,复选框用于在列表中选择一个或多个选项,单选框则用于多选项中选择一个。

单选框和复选框也是可以禁用的,只要not-allowed在父级的悬停上提供定义,<label>需要将该 .disabled类添加的到父级 .form-check,同时控件也会淡化文字颜色一灰色显示禁用状态。

-默认堆叠,默认情况下,同级任意数量的复选框与单选框按钮垂直堆叠,并与 .form-check有间隙隔离。

 

 

-水平排列,通过添加 .form-check-inline到任何一个组,会使加到任何 .form-check中的选取框平行排列。

 

       <div class="form-check form-check-inline">

  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">

  <label class="form-check-label" for="inlineCheckbox1">1</label>

</div>

<div class="form-check form-check-inline">

  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">

  <label class="form-check-label" for="inlineCheckbox2">2</label>

</div>

<div class="form-check form-check-inline">

  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>

  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>

</div>

 


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进