HTML表单是网页中用户输入数据的主要方式，包含多种元素，每个元素都有不同的用途。下面是HTML中常见的表单元素以及它们的用途和常用实例：
1. <form>
表单的容器元素，所有表单元素必须放在<form>标签内。
示例：
<form action="/submit" method="post">
<!-- 表单元素放在这里 -->
</form>
2. <input>
<input>是最常见的表单元素，类型可通过type属性定义，支持多种输入方式。
常用type属性值：
text：单行文本框password：密码框radio：单选框checkbox：复选框file：文件上传submit：提交按钮reset：重置按钮email：电子邮件输入框number：数字输入框
示例：
-
文本输入框：
<input type="text" name="username" placeholder="Enter your username"> -
密码框：
<input type="password" name="password" placeholder="Enter your password"> -
单选框radio【小圆图案】：
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
/*相同的name属性只可以选一个 */
-
复选框：
<input type="checkbox" name="subscribe" value="newsletter"> Subscribe to newsletter -
提交按钮：
<input type="submit" value="Submit"> -
重置按钮：
<input type="reset" value="Reset"> -
文件上传：
<input type="file" name="profile_picture">
3. <textarea>
多行文本输入框，允许用户输入多行文字。
示例：
<textarea name="message" rows="4" cols="50" placeholder="Enter your message"></textarea>
4. <select> 和 <option>
<select>定义下拉菜单，<option>定义下拉菜单中的各个选项。
示例：
<select name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="china">China</option>
</select>
5. <button>
定义一个按钮，type属性可以控制按钮的功能（如提交表单、重置表单等）。
示例：
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Button clicked')">Click Me</button>
6. <label>
<label>元素定义表单控件的标签，通常与<input>元素一起使用，以提高表单的可用性和可访问性。
示例：
<label for="username">Username:</label>
<input type="text" id="username" name="username">
7. <fieldset> 和 <legend>
<fieldset>用于将表单元素分组，而<legend>为该组提供标题。可以增加表单的可读性和结构性。
示例：
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</fieldset>
8. <datalist>
<datalist>提供一组预定义的选项，用于与<input>元素搭配使用，允许用户输入与选项匹配的值。
示例：
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
9. <input type="date">, <input type="time">, <input type="datetime-local">
这些输入类型允许用户输入日期、时间或日期和时间。
示例：
-
日期输入：
<input type="date" name="dob"> -
时间输入：
<input type="time" name="meeting_time"> -
日期和时间输入：
<input type="datetime-local" name="event_datetime">
10. <input type="range">
允许用户选择一个数字范围，通常会显示一个滑动条。
示例：
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">
11. <input type="tel">
允许用户输入电话号码。它在移动设备上尤其有用，会调出数字键盘。
示例：
<input type="tel" name="phone" placeholder="Enter your phone number">
12. <input type="url">
允许用户输入URL地址，浏览器可能会进行简单的验证（如检查格式）。
示例：
<input type="url" name="website" placeholder="Enter your website URL">
13. <input type="search">
用于创建一个搜索框，通常带有搜索图标。
示例：
<input type="search" name="search" placeholder="Search">
14. <input type="color">
允许用户选择颜色，通常显示为一个颜色选择器。
示例：
<input type="color" name="favcolor" value="#ff0000">
15. <input type="month">
允许用户选择一个特定的年份和月份。
示例：
<input type="month" name="event_month">
16. <input type="week">
允许用户选择一个特定的年份和周。
示例：
<input type="week" name="week_of_year">
常见表单属性：
name: 为表单元素指定名称（在提交表单时传递数据）。value: 为输入元素指定默认值或选中的选项。placeholder: 为输入框提供占位符文本。required: 指定该字段为必填项。disabled: 禁用表单元素，使其无法交互。readonly: 只读，用户不能修改输入框的内容。maxlength: 限制输入框可以输入的最大字符数。
表单提交：
action: 表单数据提交的目标URL。method: 数据提交方式，常见值有GET和POST。
//这get和post的区别实在form表单环境下
1. get是从服务器上获取数据，post是向服务器传送数据。 2. get是把参数数据队列加到提交表单的ACTION属性所指的URL 中，值和表单内各个字段一一对应，在URL中可以看到。post是通 过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到 这个过程。 3. 对于get方式，服务器端用Request.QueryString获取变量的值， 对于post方式，服务器端用Request.Form获取提交的数据。 4. get传送的数据量较小，不能大于2KB。post传送的数据量较大， 一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中 为100KB。 5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。
action属性指定了提交表单时，数据将被发送到哪个URL。
这个URL通常是一个服务器端脚本（如PHP、Python、Node.js等）处理数据action属性告诉浏览器将表单数据发送到指定的地址，以便服务器根据表单提交的内容做出相应的处理。
- action属性的值
绝对URL ：指定完整的URL，表单会发送到该服务器。
相对URL ：指定相对于当前页面的URL，表单将会发送到该位置。
空字符串（""） ：如果action为空字符串，表单数据将提交到当前页面。
默认为空：如果不指定action属性，浏览器会默认提交到当前页面的URL。
示例 1: 使用绝对URL
<form action="https://www.example.com/submit_form" method="post">
<input type="text" name="username" placeholder="Enter your username">
<input type="submit" value="Submit">
</form>
在这个例子中，当用户提交表单时，浏览器将表单数据通过POST方法发送到 https://www.example.com/submit_form 。
示例 2: 使用相对URL
<form action="/submit" method="post">
<input type="text" name="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>
在这个例子中，表单数据会被发送到当前网站的/submit路径。例如，如果用户访问 https://www.example.com/contact ，表单粘贴数据发送到 https://www.example.com/submit 。
示例3: 不指定action属性（默认提交到当前页面）
<form method="post">
<input type="text" name="name" placeholder="Enter your name">
<input type="submit" value="Submit">
</form>
在这个例子中， action为空，因此表单数据将提交到当前页面的URL，即如果用户在 https://www.example.com/contact 页面上提交表单，数据会被提交到 https://www.example.com/contact 。
action和method属性的关系
action : 指定数据提交的目标地址。
method : 指定提交数据的方式（即 HTTP 请求方法）。常见的方法有：
GET : 将表单数据附加在 URL 后面，适用于获取信息。常用于查询操作。
POST : 将表单数据放在 HTTP 请求体中，适用于提交数据。常用于登录、注册、提交表单等操作。
例如：
html
复制代码
5.使用JavaScript动态设置action
您可以通过JavaScript动态修改action属性的值，根据需要调整表单提交的目标。例如：
html
复制代码
在上面的代码中，表单的action会在页面加载后被 JavaScript 动态修改为/newSubmit 。
6.结论
action属性告诉浏览器当表单提交时，数据发送到哪个服务器端URL。
如果没有指定action ，数据将提交到当前页面的URL。
action和method配合使用，可以精确控制表单数据的提交方式和目标。
示例：
<form action="/submit" method="post">
<input type="text" name="username">
<input type="submit" value="Submit">
</form>
这些就是HTML表单元素的概述和常见实例，每个元素在不同的情境下都有不同的使用方式，了解这些基础可以帮助你构建更好的用户交互界面。
[包含大量AI生成]
标签：示例,URL,元素,表单,提交,action From： https://www.cnblogs.com/GJ504b/p/18541568