先前我们已经掌握了HTML的大部分知识,已经能够制作出简单的静态页面。若要让网站实现用户间的互动交流,这时表单便扮演着关键的角色。表单具备诸多用途,它主要用来收集用户的相关信息,使得网页具有交互功能。比如用户注册登录、留言等场景都离不开表单的应用。
接下来,我们将详细解析表单的使用方法,涵盖以下内容:
- 表单标签的使用
- 表单控件的用法
通过使用标签,我们可以创建一个表单。在这个标签内部,便可嵌入各种表单控件,如输入框、文本域、单选按钮、多选按钮以及提交按钮等。
一、action —— 处理程序地址
action属性定义了表单数据提交的目的地,即表单收集好数据后要传递给远程服务的地址。这个地址可以是绝对路径或相对路径,亦或其他形式,例如发送电子邮件。
例如,使用表单发送电子邮件的场景:
二、name —— 表单名称
尽管表单名称不是必填项,但为了防止表单信息提交到后台处理程序时发生混淆,通常会为其设置一个名称。并且,在同一页面中,这个名称最好是唯一的,不要与其他表单重复。
三、method —— 数据传输方法
method属性用于定义处理程序使用何种方法来获取数据信息,常用的有get和post(由http协议定义)。
对于GET的使用场景及注意事项:
GET适用于提交少量或非关键数据。当使用GET时,浏览器会设定容量限制。若未明确设置method属性,表单将默认采用get方法。表单数据会附加在页面地址栏中,以“名称1=值1&名称2=值2”的形式发送至后台程序。
关于POST方法:
POST将表单数据与URL分开发送,用户在页面地址栏中无法看到提交的数据,因此安全性更高。POST没有数据长度限制,但速度可能会慢些。带有POST的表单提交后无法添加书签。
四、enctype —— 编码方式
enctype属性规定了在发送至服务器前如何对表单数据进行编码。
其可能的值包括...
五、target —— 显示目标
target属性规定了action URL的打开方式。它常用于显示表单返回的信息,如是否成功提交、是否出错等。
其属性值可能指向一个框架或浮动窗口。后面我们会讲解框架和浮动窗口的概念,即在页面中嵌入一个子窗口。
表单控件,即收集数据的各种形式组件,如输入框、密码框、单选按钮、多选按钮、下拉菜单、文本域、提交按钮等。
下面是一个基本表单的示例代码及效果展示:
这里呈现了一个包含输入框、密码框、单选按钮、下拉菜单和文本域等组件的基本表单。接下来,我们将按其使用类型详细介绍各种表单控件。
值得注意的是,所有表单控件都拥有name属性和value属性,用于与其他控件进行区分。后台程序将依据这个名称获取对应控件的value值。
欲了解更多关于各种表单控件的详细信息,请期待下篇介绍。感谢您的关注。
上一篇文章:
下一篇文章: