您的位置：首页 > Web前端 > HTML5

每天15min-HTML5(11)-表单（中）

2016-06-11 21:43 465 查看

主要内容

1、表单系列标签的分类 2、什么是控件

3、文本域控件的使用方法 4、输入域的使用方法

表单系列标签的分类

表单系列标签当中的内容非常多，不但标签的个数非常的多，而且有个别标签使用的方法多种多样。但是咱们还是老办法，把这些复杂的标签进行分类，然后一类一类的去记忆，就会简单的多。

表单标签：该系列只有一个标签，用于在网页当中定义一个表单；

输入标签：该系列有两个标签，主要用于不同形式接收用户的输入；

文本域标签：允许用户输入大段的文本内容；

列表标签：该系列有两个标签，主要用于定义一个列表，让用户进行选择；

定义标签：该系列有三个标签，主要用于对前两种标签进行一些描述，对表单中的内容进行分组；

表单的定义方法

表单标签的名字叫做from,在网页上插入一个form标签就定义了一个表单，该标签和我们之前学习的标签不太一样，因为它是不可见的。也就是说用户是无法在网页当中看到表单的。

那么表单的作用是什么呢？

它所存在的价值是将网页当中的表单内容进行分组，也就是说在网页当中可能同时存在有多个表单，比如说在同时存在有用于登录的表单和用于搜索的表单，如果不去进行分类，那么就乱套了。

举个显示当中的例子，如果我们把整个表单看成是一封信的话，那么form标签的作用类似于信封，主要用于定义这封信是要邮寄到什么地方，是用什么方式邮寄，是普通的信还是挂号信等等。而表单当中的各种其他的元素就相当于信纸，用户可以在信纸上写下各种内容，点击提交按钮之后就可以将信邮寄到服务器去。

form标签有两个比较重要的属性，其中第一个的名字叫action，这个标签的值主要用于指定表单需要将数据提交到什么地方，另外一个属性的名字叫做method，这个属性的作用是用于指定需要使用什么方法提交表单。

但是目前我们所掌握的知识还不足以理解这两个属性，所以现在大家只要有一个初步的印象就可以了，关于这两个属性值的具体作用，我们会在JavaScript课程当中为大家进行详细的介绍。

什么是控件

表单定义完毕之后就需要向表单当中加入内容，否则用户也无法跟网页进行互动，表单当中用于跟用户进行互动的元素就叫做控件。

可能大家对于这个名词也比较的陌生，不过这都无所谓，还是那句话，名词这种东西用的多了就熟悉了。在今后的讲课过程当中我有可能会说控件，也有可能说这是表单标签，其实表达的都是同样的意思，大家习惯之后就好了。

输入控件的使用方法

在刚才的内容当中，我们曾经说过表单标签的种类很多，其中使用频率最高也是最重要的就是input标签，下面我们就逐一的为大家演示这个标签的使用方法。

文本控件的使用方法

所谓的文本控件，就是让用户输入大段的文本，对比刚才我们为大家介绍的input标签来说，名为textarea的文本控件，允许用户一次性输入更多的文本信息，有点类似于大家在编写邮件的使用，使用的那个在线文本编辑器。但是在线文本编辑器的实现本身要比textarea复杂的多，这里面只是给大家做个比喻。

在网页当中添加一个textarea标签就在网页当中插入了一个文本控件，该控件有两个属性，分别名为cols和rows,用于指定文本区可见的宽度和行数。

源代码：

<!DOCTYPE html>
<html>
<head>
<title>form01</title>
<meta charset="utf-8">
</head>
<body>
<form action="" method="">
username:<input type="text" name="username" value="请输入用户名"><br/>
password:<input type="password" name="password"><br/>
gender:<input type="radio" name="gender" value="f">
gender:<input type="radio" name="gender" value="m"><br/>
gender1:<input type="radio" name="gender1">
gender2:<input type="radio" name="gender2"><br/>
eat:<input type="checkbox" name="hobby" value="吃饭">
sleep:<input type="checkbox" name="hobby" value="睡觉"><br/>
上传文件:<input type="file" ><br/>
<textarea name="content" cols="30" rows="10"></textarea><br/>
<input type="submit" value="提交" >
<input type="reset" value="重置" >
<input type="button" value="JS专用">
</form>
</body>
</html>

自学Mars老师的HTML5视频教程第一季第十一集--表单（中）。

代码地址：https://github.com/HXQWill/Quan_Mars_HTML/blob/master/form01.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航