菜单

Form表单

2018年11月16日 - Bootstrap

图片 1

8.贯彻如下表单,附上预览地址。其中性别与可行性是单选,爱好是多选

链接

水平排放的表单

得你的表单元素用程度排放,可以以表单上补偿加类.form-inline,这种表单一般以要素于少时较适用

例如

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

图片 2

常见表单+元素水平排放

这种表单用之是极多的,在一般用户注册,填写资料时,经常得见到如下的表单效果

图片 3

实现这种表单使用了.form-horizontal接近,每行元素让打包于<div class="form-group">…</div>即可

form >
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

俺们通过代码也得见见,在拓展表单布局时,也堪为此col-sm和col-sm-offset进行栅格布局!


4.placeholder 属性有什么打算?

placeholder 属性提供可讲述输入字段预期值的提示信息(hint)。
欠提示会在输入字段为空时显示,并会于字段获得焦点时消失。

于进展好之后台改版时,大体布局都采取了bootstrap,剩下的表单部分没理由不失去采用她,对于表单的鼓吹和布局,bootstrap做的也罢是老不错的,有大量的边框,多力量的按钮及本之表单布局,一切都是那么的完整和完满!

3.于input里,name 有什么打算?

name 属性规定 input 元素的称号。
name 属性用于对交付到服务器后的表单数据开展标识,或者当客户端通过
JavaScript 引用表单数据。
诠释:只有设置了 name 属性的表单元素才会于提交表单时传递它们的价值。

常备表单

俺们得以说明单元素包裹到form-group类里,一般以<div >...</div>来进行存放,而在它内容表单元素名称一般放在label标签里,而input标签的类名为form-control,值得注意的凡,你的checkbox和radio等元素用写以投机之div里。

如下面的表单

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

运行后的功效

图片 4

2.post 与 get 方式的分?

参考自w3schools的“标准答案”

5.type=hidden隐藏域有什么打算? 举例说明

hidden隐藏域也是表单元素之一,它的语法和其他表单元素一样:

<input type="hidden" name="field_name" value="value"> 

hidden隐藏域无外乎下面六点作用:

  1. 隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在收集或者发送信息,以好让处理表单的次第所祭。浏览者单击发送按钮发送表单的时刻,隐藏域的信息呢被联合发送到服务器。
  2. 稍上咱们若给用户同样信,让他以付给表单时交由上以确定用户位置,如sessionkey,等等.当然这些东西呢能为此cookie实现,但以隐藏域就概括的几近矣.而且不会见有浏览器不支持,用户禁用cookie的烦心。
  3. 有些上一个form里产生差不多独提交按钮,怎样使程序会分清楚到底用户是以那一个按钮提交上去的吧?我们就好形容一个隐藏域,然后在各个一个按钮处加上onclick=”document.form.command.value=”xx””然后我们吸收数后先检查command的价值就见面分晓用户是依照的要命按钮提交上的。
  4. 有时一个网页中发出多个form,我们明白多单form是免可知同时提交的,但奇迹这些form确实相互作用,我们尽管得以form中长隐藏域来如它联系起来。
  5. javascript不支持全局变量,但有时候我们亟须用全局变量,我们即便得把值先存在隐藏域里,它的值就是未会见掉了。
  6. 还发个例子,比如以一个按钮弹有四单稍窗口,当点击其中的一个略带窗口时别三独机关关闭.可是IE不支持小窗口相互调用,所以只有在父亲窗口写个隐藏域,当小窗口看到大隐藏域的值是close时就和好关闭
常用的input标签

图片 5

Paste_Image.png

7.形容一篇博客简单介绍 HTML 表单的用法,附上博客链接

博客链接

1.form表单有什么打算?有什么样常用之input 标签,分别有什么打算?

意:用于申明表单,定义采集数据的限,包含的数将于交给到服务器或者电子邮件里。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图