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

最新推荐文章于 2024-07-19 11:00:40 发布

由此及彼

最新推荐文章于 2024-07-19 11:00:40 发布

阅读量323

点赞数 1

分类专栏： JSP&Servlet学习笔记

本文链接：https://blog.csdn.net/hxqneuq2012/article/details/51638027

版权

JSP&Servlet学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

主要内容

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