HTML 知识量:9 - 26 - 70
<form>标签是HTML(超文本标记语言)中的一个重要元素,它用于创建用户输入的表单。这些表单可以包含各种不同类型的输入元素,如文本字段、复选框、单选按钮、按钮等。<form>标签的主要目的是收集用户输入的数据,并将其提交到服务器进行处理。
在HTML文档中,<form>标签通常以<form>开始,以</form>结束。在这个标签内部,可以放置各种输入元素,如<input>、<textarea>、<select>等,以及其他可能的表单元素,如<label>、<fieldset>和<legend>等。
<form>标签在HTML中具有多个属性,这些属性用于定义表单的行为和特性。以下是一些常用的<form>标签属性:
1. action:此属性定义当用户提交表单时,数据将发送到的位置(即服务器上的URL)。如果未指定此属性,数据将发送到当前页面的URL。
2. method:此属性定义用于发送表单数据的HTTP方法。最常见的两种方法是GET和POST。
GET方法:数据将附加到表单的action URL的末尾,并在URL中可见。这种方法通常用于简单的表单或数据量较小的情况,但因为它在URL中显示数据,所以可能不安全。
POST方法:数据将包含在表单的提交请求的主体中,而不是URL中。这种方法更安全,适用于传输大量或敏感数据。
3. name:此属性为表单定义了一个唯一的名称。这主要用于在JavaScript或服务器端脚本中引用表单。
4. target:此属性定义在提交表单后响应的显示位置。常见的值包括_blank(在新窗口或标签页中打开)、_self(在当前窗口或标签页中打开)、_parent(在父框架中打开)和_top(在整个窗口中打开)。
5. enctype:此属性定义在提交表单时如何编码表单数据。常见的值包括application/x-www-form-urlencoded(默认值,将表单数据编码为键值对)、multipart/form-data(用于文件上传)和text/plain(将表单数据编码为纯文本)。
在HTML表单中,<input>标签是用于创建用户输入字段的主要元素。通过改变type属性,可以创建不同类型的输入字段,如文本框、密码框、复选框、单选按钮、提交按钮等。
以下是一些常见的<input>标签的type属性值及其描述:
1. text:创建一个单行文本输入框,用户可以在其中输入文本。
<input type="text" name="username" placeholder="请输入用户名">
2. password:创建一个密码输入框,用户输入的文本将被掩码(通常以点或星号显示)。
<input type="password" name="password" placeholder="请输入密码">
3. radio:创建单选按钮,允许用户从多个选项中选择一个。
<input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女
4. checkbox:创建复选框,允许用户选择多个选项。
<input type="checkbox" name="hobby" value="reading"> 阅读 <input type="checkbox" name="hobby" value="music"> 音乐
5. submit:创建提交按钮,用于提交表单数据。
<input type="submit" value="提交">
6. reset:创建重置按钮,用于清除表单中的所有输入字段。
<input type="reset" value="重置">
7. button:创建普通按钮,通常与JavaScript结合使用以实现特定功能。
<input type="button" value="点击我" onclick="alert('你点击了按钮!')">
8. file:创建一个文件选择字段,允许用户选择一个或多个文件上传。
<input type="file" name="fileToUpload">
9. hidden:创建一个隐藏输入字段,用户在页面上看不到,但表单提交时会包含该字段的值。
<input type="hidden" name="hiddenField" value="secretValue">
此外,<input>标签还有其他一些常用的属性,如:
name:定义输入字段的名称,这对于在表单提交后识别字段非常重要。
value:定义输入字段的初始值或当前值。
placeholder:提供一个提示信息(占位符),在用户尚未输入任何内容之前显示。
通过使用不同的type属性和其他属性,<input>标签可以创建丰富的用户输入界面,从而收集和处理用户提交的数据。
在HTML中,多行文本框使用<textarea>标签。<textarea>标签允许用户输入多行文本,这在需要输入长文本内容(如评论、反馈或消息)时非常有用。
以下是一个<textarea>标签的基本示例:
<textarea name="message" rows="10" cols="30" placeholder="请在此输入您的消息..."></textarea>
<textarea>标签的属性包括:
name:定义文本框的名称,这在表单提交时用于识别文本内容。
rows:指定文本框的可见行数。这决定了文本框的垂直大小。
cols:指定文本框的可见列数。这决定了文本框的水平大小。然而,这个属性在现代浏览器中通常被CSS样式(如width)所取代。
placeholder:提供一个占位符文本,当文本框为空时显示给用户。
此外,还可以使用CSS来进一步自定义<textarea>的外观,包括边框、背景、字体和大小等。
<textarea>标签之间的内容(在开始标签和结束标签之间)将作为文本框的默认文本出现,但如果同时使用了placeholder属性,则默认文本不会显示。通常,<textarea>标签之间不放置任何内容,除非想在没有用户输入时显示一些预定义的文本。
<textarea>标签是表单中处理多行文本输入的标准方式。如果需要一个允许用户输入长文本的字段,那么应该使用这个标签。
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6