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>
常见表单+元素水平排放
这种表单用之是极多的,在一般用户注册,填写资料时,经常得见到如下的表单效果
实现这种表单使用了.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>
运行后的功效
2.post 与 get 方式的分?
参考自w3schools的“标准答案”
- GET在浏览器回退时是无害的,而POST会再次提交请求。
- GET产生的URL地址可以叫Bookmark,而POST不得以。
- GET请求会给浏览器主动cache,而POST不会见,除非手动设置。
- GET请求只能进展url编码,而POST支持多编码方式。
- GET请求参数会吃完整保存在浏览器历史记录里,而POST中之参数不见面给保存。
- GET请求在URL中传递的参数是生长限制的,而POST么有。
- 本着参数的数据类型,GET只接受ASCII字符,而POST没有限定。
- GET比POST更无安全,因为参数直接暴露于URL上,所以无克因此来传递敏感信息。
- GET参数经URL传递,POST放在Request body中。
5.type=hidden隐藏域有什么打算? 举例说明
hidden隐藏域也是表单元素之一,它的语法和其他表单元素一样:
<input type="hidden" name="field_name" value="value">
hidden隐藏域无外乎下面六点作用:
- 隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在收集或者发送信息,以好让处理表单的次第所祭。浏览者单击发送按钮发送表单的时刻,隐藏域的信息呢被联合发送到服务器。
- 稍上咱们若给用户同样信,让他以付给表单时交由上以确定用户位置,如sessionkey,等等.当然这些东西呢能为此cookie实现,但以隐藏域就概括的几近矣.而且不会见有浏览器不支持,用户禁用cookie的烦心。
- 有些上一个form里产生差不多独提交按钮,怎样使程序会分清楚到底用户是以那一个按钮提交上去的吧?我们就好形容一个隐藏域,然后在各个一个按钮处加上onclick=”document.form.command.value=”xx””然后我们吸收数后先检查command的价值就见面分晓用户是依照的要命按钮提交上的。
- 有时一个网页中发出多个form,我们明白多单form是免可知同时提交的,但奇迹这些form确实相互作用,我们尽管得以form中长隐藏域来如它联系起来。
- javascript不支持全局变量,但有时候我们亟须用全局变量,我们即便得把值先存在隐藏域里,它的值就是未会见掉了。
- 还发个例子,比如以一个按钮弹有四单稍窗口,当点击其中的一个略带窗口时别三独机关关闭.可是IE不支持小窗口相互调用,所以只有在父亲窗口写个隐藏域,当小窗口看到大隐藏域的值是close时就和好关闭
常用的input标签
Paste_Image.png
7.形容一篇博客简单介绍 HTML 表单的用法,附上博客链接
博客链接
1.form表单有什么打算?有什么样常用之input 标签,分别有什么打算?
意:用于申明表单,定义采集数据的限,包含的数将于交给到服务器或者电子邮件里。