从零开始的html教程(7)：html表单基础之一

一聚教程网 从零开始的html教程(7)，html表单的基础，零基础也能轻松学会html，希望大家喜欢

一、html的表单

表单负责网页中用户输入数据采集的功能，利用<form>标签来定义一个表单。<form>...</form>form标签中间的数据将会上传至服务器处理

二、表单中最重要的元素——<input>元素

input必不可少的type属性有很多种类型，我们来逐一讲解一下。

1.text属性，<input type="text">

text是用来文本输入的，举个例子，在页面主体里添加：

<form> 搜索：<input type="text" name="search"> </form>

即可实现搜索框的外观。当然，这样只有外表没有功能……

2.单选按钮输入，<input type="radio">

radio是用来定义单选按钮的，让用户在多个选项里选择一项的功能即是通过radio实现。举个例子，在页面主体里添加：

<form> <p>1加1等于几？</p> <p><input type="radio" name="answer1" value="1">1<input type="radio" name="answer2" value="2">2</p> </form>

可以实现简单的选择功能。其中name属性的用法是当type属性是radio单选时，选择操作只能在name值相同的input标签里选择一项，得以实现单选功能。value用来上传真实的值，提交表单时选中的input的value值会被上传，与数据库进行互动，不过这是后话了。

3.表单的提交，<input type="submit">

type属性的submit是最常用最一般的提交表单的方法，给type submit取value值，可以直接在提交按钮上显示出value值。另外，表单的提交提交需要给form开

标签actin属性来指定表单的上传时的动作，如果省略action属性不写，action会默认为当前页面。将刚才学到的内容结合起来，写一个有提交按钮的表单：

<form action="form.php"> <p>账号：<input type="text" name="usna"></p> <p>密码：<input type="password" name="password"></p> <p>1加1等于几？</p> <p><input type="radio" name="answer" value="a1" checked>1<input type="radio" name="answer" value="a2">2</p> <input type="submit" value="提交"> </form>

这里的type password是用来定义密码输入的，输入文本都会以"*"星号表示，用法跟text一样，就不多说了。这篇教程我们学习到了html表单的基础，下一篇会进行拓展，制作一个复杂的表单。

小编分享的这篇文章介绍了Bootstrap中popover的用法，作者写的很详细，有需要的同学可以看一看

最近在自学Java Web基础，搭建自己的页面时候用到了Boostrap的JS库。由于之前没有接触过JQuery，所以用起来磕磕绊绊，所以在这里简单记一下Boostrap中我用到的JS插件的一些用法。

第一个用到的就是Boostrap中的popover插件。原因是一个简单的注册界面需要验证用户名是否合法，是否已被注册，密码是否合法，再次输入密码是否和之前的密码匹配等，需要用到popover来进行信息警告。

首先一个简单的例子:

可以看到，在使用API进行popover编程时，一定要引用$(‘#element').popover()对id=”element”的控件进行popover激活。之前就是直接复制官网上的代码，发现点击后并不能trigger，一直很困惑。然后用name=”element”是不能激活popover的。
要是需要为input框添加popover效果，则只需要trigger='focus'即可。但似乎不支持blur，不能在blur之后判断input框中的内容是否合法从而触发popover。这个还需后续再研究。

这篇文章给大家介绍了如何优化网页加载速度方法，有很多小细节，有兴趣的同学可以研究一下！ 一聚教程网 从零开始的html教程(6)，超链接的使用和html5插入视频，零基础也能轻松学会html，希望大家喜欢

一、如何链接到其他网页？

超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件,甚至是一个应用程序。而在一个网页中用来超链接的对象,可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上,并且根据目标的类型来打开或运行。

html中插入<a>标签就可以添加超链接了，具体格式是这样的<a href="url">XXX</a>。其中href属性规定了规定了超链接链接的目标。开始标签与结束标签之间的文本就是超链接本身，网页中浏览时可以点击该文本链接到具体地址，鼠标移到这几个文字上面时，鼠标指针会变成伸出食指的手。

<a href="url">XXX</a>中间不一定是文字，插入一个<img>标签可以实现点击图片链接到其他网页的效果。

二、在新窗口中打开链接

同学们如果试着做了几个超链接并点击几次后一定会发现，新页面不是以我们平常上网时点击链接进入一个新的页面的方式打开的，而是直接在当前页面载入了新的页面，很不方便。给超链接的<a>标签添加一个target 属性，且设置为 "_blank"，<a href="video.html" target="_blank">，点击的时候就会在新的页面打开链接了！

三、html5中插入视频

超链接我们已经会了，现在来做一下点击超链接进入视频播放页面吧。如今大部分网页都是靠flash来实现视频播放的，html5也提供了视频播放的标准方法<video>标签。<video src="movie.mp4" controls="controls">您的浏览器不支持播放此视频</video>，这里面src属性规定了video的路径（跟图片同理），controls属性提供添加播放、暂停和音量控件,标签中间的文本是当浏览器无法播放视频时显示的文字。

1.在一开始制作的页面上添加一个超链接，链接到一个新建的页面：

<div>

<a href="video.html" target="_blank">视频播放</a>

</div>

2.新的页面添加视频播放的<video>标签：

<video src="video.mp4" controls>您的浏览器不支持播放此视频</video>

大功告成！简易的视频播放页面就做出来了。这次学会了非常重要的超链接的知识以及html5新增的插入视频的功能，敬请期待下一篇教程。

附：Video有以下的属性：

autoplay    autoplay    如果出现该属性，则视频在就绪后马上播放

controls     controls    如果出现该属性，则向用户显示控件，比如播放按钮

height        pixels    设置视频播放器的高度

loop           loop    如果出现该属性，则当媒介文件完成播放后再次开始播放

preload      preload    如果出现该属性，则视频在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性

src              url    要播放的视频的 URL

width           pixels    设置视频播放器的宽度