现实中的表单,类似我们去银行办理信用卡填写的单子。目的是为了手机用户信息。在网页当中,也需要跟用户进行交互,收集用户资料,此时也是需要填写表单的。
在HTML中,一个完整的表单通常是由 :表单控件(也称为表单元素)、提示信息、表单域3个部分构成。
- 表单控件:包含了具体的表单功能项,如:单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
- 提示信息:一个表单中通常需要包含一些说明性的文字,提示用户进行填写和操作。
- 表单域:相当于是一个容器,用来容纳所有的表单控件和提示信息,可以通过它定义处理表单数据所用程序的URL地址,以及数据提交到服务器的方法。如果不定义表单域,表单中的数据就无法传送到后台服务器。
1. input控件(重点)
<input />
标签是一个单标签,type属性是其基本属性,该属性的取值有多种,用于指定不同的控件类型。除了type属性之外,还有其他常用属性如下所示:
属性 | 属性值 | 描述 |
---|---|---|
type | text | 单行文本输入框 |
password | 密码输入框 | |
radio | 单选按钮 | |
checkbox | 复选按钮 | |
button | 普通按钮 | |
submit | 提交按钮 | |
reset | 重置按钮 | |
image | 图像形式的提交按钮 | |
file | 文件域 | |
name | 由用户自定义 | 控件名称 |
value | 由用户自定义 | input控件中默认的文本值 |
size | 正整数 | input控件在页面中的显示宽度 |
checked | checked | 定义选择控件默认被选中的项 |
maxlength | 正整数 | 控件允许输入的最多字符数 |
代码示例1:文本输入框与密码输入框
<p>用户名: <input type="text" value="请输入您的姓名" /></p> <!-- 这个value会默认显示在文本输入框中, 类似淘宝的搜索框 -->
<p>密 码: <input type="password" /></p>
代码示例2:实现一个选择性别的单选按钮
<p>性 别:
<input type="radio" name="sex" />女
<input type="radio" name="sex" />男
</p>
注意:上例当中,实现性别的单选按钮时,男或女只能选择其中一个,此时使用相同的name值来将男和女的选择划分为一组,要么选男要么选女。如果name值不同,就可以同时选择。
代码示例3:复选框,可以同时选择多个
<p>爱好:
<input type="checkbox" />足球
<input type="checkbox" />篮球
<input type="checkbox" />羽毛球
<input type="checkbox" />乒乓球
</p>
代码示例4:默认被选中的表单属性,一开始就默认选中:女
<p>性 别:
<input type="radio" name="sex" checked="checked" />女
<input type="radio" name="sex" />男
</p>
代码示例5:普通按钮、提交按钮、重置按钮
<p><input type="button" value="搜索" /></p> <!--普通按钮:按钮上面显示的是value值-->
<p> <input type="submit" value="提交表单" /> </p> <!-- 提交按钮:如果不添加value属性,按钮上显示的是提交 -->
<p> <input type="reset" value="重置表单" /> </p> <!-- 重置按钮:不添加value属性时,按钮上现实的是重置 -->
示例6:图片按钮
<p> <input type="image" src="login.jpg" /></p>
示例7:文件按钮:上传头像时的选择文件按钮
<p> 上传头像:<input type="file" /> </p>
示例8:maxlength
<p>密 码: <input type="password" maxlength="6" /></p>
示例9:value属性
2.label标签(理解)
label标签是input元素定义标注(标签)。
作用:用于绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会获得输入焦点
如何绑定元素?:for属性规定label与哪个表单元素绑定。
-
只有一个表单控件时可以直接使用label标签将input控件进行包裹
<label>输入账号:<input type="text" /> </label> <!-- 用label标签直接包裹input标签 -->
2.如果label里面有多个表单,想要定位到某个,可以通过for id 的格式进行,以下案例当点击前面的输入账号四个字时,会自动定位到输入密码的密码输入框。
<label for="password"> 输入账号:<input type="text" id="zhanghao" /> 输入密码:<input type="password" id="password" /> </label>
3.文本域textarea
如果需要输入大量的信息,就需要用到<textarea></textarea>
标签。通过textarea控件可以轻松的创建多行文本输入框,其基本语法格式如下:
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea>
这个文本域中的两个结构属性一般不用,他们的样式使用CSS来做。
4.下拉菜单
使用select控件来定义下拉菜单的基本语法格式如下:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
- select标签中至少应该包含一对option标签
- 在option中定义
selected="selected"
时,表示当前项即为默认选中项。
代码示例:选取你的籍贯和城市
籍贯
<select>
<option>选择你的籍贯</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected="selected">北京</option>
</select>
<select>
<option>选择你的城市</option>
<option>海淀</option>
<option>昌平</option>
<option>大兴</option>
</select>
5.表单域
在HTML中,form标签被用于定义表单域,即创建一个表单,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。创建表单的基本语法如下:
<form action="url地址" method="提交方式" name="表单名称" />
上面学习的各种控件都写在这里面,相当于所有的用户信息都用form包起来一并提交
</form>
常用属性:
-
action在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器的URL地址
-
method用于设置表单数据的提交方式,其取值为get或post。get提交速度比较快,但是不安全,会显示出你输入的内容(密码也会显示出来),不能做密码提交;post提交速度慢一些,但是比较安全,用户输入的数据(即,表单中的内容)不会显示
<form action="demo.php" method="get" /> <p>用户名: <input type="text" name="un" /> </p> <p>密 码: <input type="password" name="pwd" /> </p> <p> <input type="submit" value="提交" /></p> <p> <input type="reset" value="重置" /></p> </form>
-
name用于指定表单的名称,以区分同一个页面中的多个表单。
<form action="demo.php" method="get" name="login" /> <p>用户名: <input type="text" name="un" /> </p> <p>密 码: <input type="password" name="pwd" /> </p> <p> <input type="submit" value="提交" /></p> <p> <input type="reset" value="重置" /></p> </form> <form action="demo.php" method="get" name="register" /> <p>用户名: <input type="text" name="un" /> </p> <p>密 码: <input type="password" name="pwd" /> </p> <p> <input type="submit" value="提交" /></p> <p> <input type="reset" value="重置" /></p> </form>
注意:每个表单都应该有自己的表单域
注意区分刚学过的三个域:
- 文本域:
<textarea cols="每行中的字符数" rows="显示的行数">文本内容</textarea>
,存放大量留言; - 文件域:
<input type="file" />
,上传文件; - 表单域:form,收集表单控件信息并且提交。