HTML

HTML 知识量:9 - 26 - 70

8.2 form标签><

form标签简介- 8.2.1 -

<form>标签是HTML(超文本标记语言)中的一个重要元素,它用于创建用户输入的表单。这些表单可以包含各种不同类型的输入元素,如文本字段、复选框、单选按钮、按钮等。<form>标签的主要目的是收集用户输入的数据,并将其提交到服务器进行处理。

在HTML文档中,<form>标签通常以<form>开始,以</form>结束。在这个标签内部,可以放置各种输入元素,如<input>、<textarea>、<select>等,以及其他可能的表单元素,如<label>、<fieldset>和<legend>等。

form标签属性- 8.2.2 -

<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(将表单数据编码为纯文本)。

input标签- 8.2.3 -

在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>标签可以创建丰富的用户输入界面,从而收集和处理用户提交的数据。

多行文本框- 8.2.4 -

在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>标签是表单中处理多行文本输入的标准方式。如果需要一个允许用户输入长文本的字段,那么应该使用这个标签。

下拉列表- 8.2.5 -