- 剑指JavaWeb:技术详解与应用实践
- 尚硅谷教育编著
- 611字
- 2024-07-24 13:17:46
2.5 表单
学完表格,接着学习另一个常用的标签:表单。网页中通常使用表单提交数据,需要从客户端发起请求至服务器端,然后服务器端给出响应。下面,我们对创建表单涉及的标签进行简单介绍。
● <form>标签:用于创建一个表单。在<form>标签内,通常会放置一个或多个专门用于表单的标签,这些表单标签用于提供输入信息的不同方式,如文本框、单选、多选、下拉菜单等。
● <input> 标签:用于创建一个文本框。<input>标签可以设置name属性给该标签命名;设置type属性用来定义<form>标签中输入数据的类型,包括4种属性值,分别是text(文本输入框)、password (密码框)、radio(单选框)和checkbox(复选框);还可以设置value属性值,用来表示文本输入框中默认显示的内容。
● <select>标签:用来实现下拉列表。该标签可以包含一个或多个<option>标签,用来表示下拉列表中的项。
● <textarea>标签:用来表示文本域。文本域可以用来输入多行文本,输入的内容中允许换行。
● <button>标签:用于创建一个提交按钮。
图2-46就是一个经典的用户登录表单,创建test_form.html文件,示例代码如下。
![](https://epubservercos.yuewen.com/B84C2D/30120995704540106/epubprivate/OEBPS/Images/48021_42_1.jpg?sign=1739298162-VNo0TkVP0Xqkx1eCa4R2adhurFryuE2H-0-a32b434df8a239d848d9de9c1473fde4)
代码中定义了两个文本框,文本框类型分别是文本和密码。运行代码查看效果,如图2-46所示。
![](https://epubservercos.yuewen.com/B84C2D/30120995704540106/epubprivate/OEBPS/Images/48021_42_2.jpg?sign=1739298162-mVjfCiorFs40Cx18B8kh3yWu7Zm4w72F-0-5db95a9a417747231d885818ee398c45)
图2-46 用户登录页面
此时输入信息,在用户名对应文本框中显示的是用户名文本,在密码对应文本框中无论输入什么都以“*”来显示,如图2-47所示。
![](https://epubservercos.yuewen.com/B84C2D/30120995704540106/epubprivate/OEBPS/Images/48021_42_3.jpg?sign=1739298162-mcQ06B4Nh2HvYU4Cq8elwOrU5xnVQW27-0-b1631f39093cea936326732510b94adf)
图2-47 输入用户名和密码
需要注意的是,虽然密码框在表单中展示为占位符“*”,好像被加密了,但是如果提交表单后就会发现实际上并没有被加密。提交表单后,查看浏览器地址栏,如图2-48所示。
![](https://epubservercos.yuewen.com/B84C2D/30120995704540106/epubprivate/OEBPS/Images/48021_42_4.jpg?sign=1739298162-gaKtZyXLttTvCVVFdXSqQoNhtnNOthMi-0-aba9f21670a4b3c92a807cbcc6276f58)
图2-48 提交表单后,查看浏览器地址栏