在HTML的早期历史中,在JavaScript被添加到网页之前,网页中唯一的交互功能是HTML表单。表单是一种特殊的页面元素,用户可以在其中向专门的表单元素输入数据,然后单击按钮将表单数据提交给服务器。
最初的想法是,HTML表单将使请求定制的HTML页面成为可能,这些页面将由web服务器根据用户的请求生成。
要开始创建HTML表单,我们从HTML form元素开始:
<form action="<URL>">表单元素放到这里</form>
action属性被设置为一个URL,该URL指向将处理表单请求的web服务器上的一个特殊计算资源。当用户输入数据并单击按钮提交表单请求时,表单中的数据将被发送到此URL。作为响应,服务器将生成一个自定义页面,并将该页作为表单响应返回。
为了使用户能够在表单中输入信息,我们必须提供一个或多个表单元素。下面是对最常见表单元素的概述。
要在表单中设置文本字段,可以使用元素:
<input type="text" name="username" />
当包含表单的页面将表单提交给服务器进行处理时,用户在表单中输入的数据值将作为一组键值对发送到服务器。HTML输入元素的name属性指定用户将在这里输入的数据使用的键值。这个元素的值就是用户输入到文本字段中的文本。
纯文本输入元素的另一种替代方法是password input,它会屏蔽用户键入的字符:
<input type="password" name="password" />
textarea元素设置了一个文本区域,用户可以在其中键入多行文本。
<textarea name="comments" />
要实现一组可供选择的选项,可以使用单选按钮。要制作一组单选按钮,需要制作两个或多个具有相同名称的radio类型的输入元素。当用户提交表单时,表单将发送的值将对应于用户当前按下的单选按钮。
<input type="radio" name="color" value="red" /> <input type="radio" name="color" value="green" /> <input type="radio" name="color" value="blue" />
使用单选按钮的另一种选择是下拉菜单。我们通过select元素在表单中实现菜单:
<select name="meal"> <option value="breakfast">早餐</option> <option value="lunch">午餐</option> <option value="dinner">晚餐</option> </select>
每个选项元素的内容指定将为该特定菜单项显示给用户的文本。
最后,每个表单都需要有一个提交按钮。单击此按钮将提交表单进行处理。此元素的value属性指定要在按钮中显示的文本。
<input type="submit" value="Sign Up" />
单击该页顶部的示例表单页面按钮将进入一个包含表单的HTML页面。该表单的后端处理由Spring Boot赢博体育程序完成,该赢博体育程序使用JSP处理用户的请求并显示响应。
上面的NetBeans Project按钮链接到一个包含本例后端服务器源代码的归档文件。这个示例项目依赖于MySQL数据库的使用。要运行该项目,请在MySQL工作台中创建一个名为“卡路里”的数据库,并导入在项目文件夹的数据库文件夹中找到的数据库文件,以设置数据库。然后,您可以运行NetBeans项目来启动后端服务器,服务器将为您处理来自表单的表单请求。