HTML_表单的介绍&提交按钮

简介: HTML_表单的介绍&提交按钮

一.表单的定义

发送请求,并且携带数据给服务器。

表单和超链接有共同的特征,就是都可以向服务器发送请求,

只不过超链接是用户直接点击发送请求,不能填写数据。

而用户点击表单提交的时候,不但可以发送请求,而且请求中还可以携带输入的数据。


表单最主要的作用就是:收集用户的信息。

             

表单对应的英语单词是:form


二.怎么定义一个表单对象呢?

                   表单项1:

                   表单项2:


               另外要注意:一个网页上可以有多个表单对象。


三.代码演示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>表单</title>
  </head>
  <body>
         <!-- 超链接-->
     <a href="http://www.baidu.com">百度</a>
     <br><br><br>
     <!-- 表单-->
     <form action="http://www.baidu.com">
      <!-- 按钮,提交表单的按钮,只要点击这个提交按钮,就发送请求了! -->
      <!-- 所有能够提交表单的按钮,type必须是submit,不能随便写 -->
      <!-- <input type="submit"/> -->
      <!-- 设置按钮上显示的文本用value字段 -->
      <input type="submit" value="百度"/>
      <!-- button是一个普通按钮,能提交表单吗?答案是不能。 -->
      <!-- <input type="button" value="百度"/> -->
     </form>
     <!-- submit提交按钮放在form外面也是不行的!同样不能提交表单跳转到百度页面-->
     <input type="submit" value="百度(外)"/>
  </body>
</html>

注意事项


1:form标签中有一个action属性,这个属性和超链接的href相同。都需要填写url


2:type="submit"代表提交按钮,所有能够提交表单的按钮,type必须是submit,不能随便写


value用来设置按钮上显示的文本。


思考问题


1:假设此时我们使用type="button"这种类型的按钮,是否可以成功提交?


答:当然不可以,button是一个普通按钮,是不能提交的。


2:假设此时我们将type="submit"这个按钮放到我们的form标签外的话,此时是否还具有提交功能?


答:当然没有,今后实际编程中是一定要注意这个问题。


相关文章
|
1月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性详解
HTML5引入了多种新的表单属性,使表单创建与验证更加便捷高效。新增的输入类型包括`email`、`url`、`tel`等,常用属性有`placeholder`、`required`等。表单元素如`&lt;form&gt;`可设置提交方法和目标URL,`&lt;button&gt;`及`&lt;input type=&quot;submit&quot;&gt;`用于提交。新元素`&lt;datalist&gt;`和`&lt;output&gt;`提供更多功能。HTML5还提供了内置表单验证机制,增强用户体验。
|
1月前
|
移动开发 数据安全/隐私保护 UED
HTML5 表单元素详解
HTML5 引入了新的表单元素和属性,如 `&lt;form&gt;、&lt;input&gt;、&lt;textarea&gt;、&lt;select&gt;` 和 `&lt;button&gt;`,以及 `required、min、max` 等属性,增强了表单的创建与交互。其中,`&lt;input&gt;` 支持多种类型如 `email、url、date` 等,提供了更好的用户体验和数据验证。此外,HTML5 还新增了原生表单验证功能,简化了开发流程并提升了安全性。
|
25天前
全局变量
【10月更文挑战第1天】全局变量。
38 4
WK
|
28天前
|
Web App开发 存储 移动开发
HTML5新增了哪些表单元素
HTML5通过新增多种表单元素和属性,提升了用户体验与交互性。例如,`email`和`url`元素分别验证邮箱地址和网址格式;`number`和`range`便于输入数字及区间值;`date`等元素简化了日期时间的选择;`search`添加搜索图标,`color`提供颜色选择器;`datalist`结合`input`属性给予用户下拉列表选项;`keygen`用于生成密钥对以增强安全性;`output`则用于动态展示计算结果。这些改进共同提高了表单的功能性和易用性。
WK
20 2
WK
|
28天前
|
移动开发 UED HTML5
HTML5新增了哪些表单属性
HTML5新增的表单属性包括:autocomplete(启用或禁用自动完成建议)、autofocus(自动聚焦)、form(关联表单外的表单元素)、formaction等重写版本(自定义提交行为)、height/width(设置图像输入尺寸)、list(指定可选列表)、min/max/step(设置数值范围)、multiple(多选文件/选项)、pattern(正则表达式验证)、placeholder(占位符提示)和required(必填校验)。这些新功能显著提升了表单的灵活性和用户体验,使数据输入更加准确有效。
WK
20 1
|
2月前
|
前端开发
Twaver-HTML5基础学习(28)工具条(添加自定义按钮_自定义事件)
这篇文章介绍了如何在Twaver-HTML5中创建工具条,添加自定义按钮,并绑定自定义事件,包括放大、缩小、占满屏幕和重置画布大小的功能。
48 11
|
20天前
|
数据采集 数据安全/隐私保护
html常见的表单元素有哪些,html表单元素有哪些?
html常见的表单元素有哪些,html表单元素有哪些?
12 0
|
2月前
|
移动开发 前端开发 JavaScript
HTML 表单和输入详解
HTML 表单是收集用户输入的关键组件,包括多种输入控件如文本框、单选框、复选框、下拉列表等。表单由 `&lt;form&gt;` 标签定义,常用属性有 `action` 和 `method`。输入控件如 `&lt;input&gt;` 和 `&lt;select&gt;` 可实现不同类型的用户输入,而 `&lt;button&gt;` 用于提交表单。HTML5 还提供了表单验证功能,如 `required` 和 `pattern` 属性,确保输入的有效性。结合 JavaScript 可实现更复杂的表单逻辑。掌握表单是前端开发的基础技能之一。
|
2月前
|
JavaScript 前端开发
HTML 表单和输入与按钮的联动方法汇总
在HTML中,通过JavaScript可以轻松实现表单与输入、按钮的互动。本文介绍了基本表单结构,并展示了如何用JS处理按钮点击、表单提交、动态禁用按钮、表单验证以及使用AJAX和jQuery简化代码等技巧,帮助你更好地控制和优化表单功能。
|
3月前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
44 4