表单| 学习笔记

简介: 快速学习表单。

开发者学堂课程【零基础学前端 HTML+CSS 表单】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/398/detail/5116


表单

 

内容介绍:

一、什么是表单

二、表单的基本构成

 

一、什么是表单

在页面上经常能看到人机交互,其实表单是一种人和电脑之间一个对话的途径,几乎所有的网站都会有表单,像搜索引擎,进入后就是一个文本框,是一个大表单。

总结:

表单在网页中主要负责数据采集功能。

表单标签

这里面包含了处理表单数据所用 CGI 程序的 URL 以及数据提交到服务器的方法。

表单域:

包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。

表单按钮

包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了外理脚本的处理工作。

比如网页账号登录就是一个表单

image.png

表单用于搜集不同类型的用户输入

在填入内容或者发送一个消息时怎么和电脑做一个交互,服务器怎么能接收我们的信息,需要一个入口

 

二、表单的基本构成

一个表单有两个基本组成部分

表单标签

表单域

注意:表单域是嵌入在表单标签里面的

总结:

表单是人和电脑互相交流的通道,表单跟现实生活的表非常相似。

表单区域代码

表单标签用于定义表单名字、提交数据的目的地及提交方式等信息。

<form> 标签用于描述表单,它是双标签。

如下示例:

<formname="form1" action="register.aspx" method="post" >

......

</form>

表单先要写表单区域,表单的元素放在表单区域里边

比如下图就是一个表单,它其实是一个区域,多选框、文本框、按钮等元素都在一个区域里,一个区域里可以有一个按钮来提交,一个页面可以有多个表单存在

image.png

总结:

<form></form> 组成一个表单区域,我们的元素放在这个区域里边。一个页面可以有多个表单区域。命名时元素不要进行重名

相关文章
|
存储
表单的解析
表单的解析
|
2月前
|
缓存 前端开发 数据可视化
前端基础(七)_表单的基本组成与使用
本文详细介绍了HTML表单的基本组成和使用,包括`<form>`标签、`<input>`表单域、`<select>`下拉列表、`<textarea>`多行文本域等元素。文章解释了表单的提交方式(GET和POST)、表单域的各种类型(文本、密码、单选按钮、复选框等)、提交按钮和重置按钮的作用,以及如何通过`<label>`标签提高表单的可访问性。此外,还讨论了表单元素的属性,如`readonly`、`disabled`、`maxlength`等。
29 1
|
2月前
表单的构成与创建
表单的构成与创建。
16 2
|
5月前
绑定表单
【6月更文挑战第13天】绑定表单。
28 3
|
5月前
|
Python
表单
【6月更文挑战第3天】表单。
29 1
|
6月前
|
数据可视化 数据挖掘 API
5 款热门的表单设计器推荐
5 款热门的表单设计器推荐
|
6月前
|
移动开发 前端开发 JavaScript
Vue3中表单相关的知识:表单绑定、表单验证、表单处理
Vue3中表单相关的知识:表单绑定、表单验证、表单处理
254 0
|
数据采集 数据安全/隐私保护
什么是表单?
什么是表单?
|
SQL 前端开发 数据库
Yii2.0的模型表单、活动表单和AJAX表单是干什么的?底层原理是什么?
Yii2.0的模型表单、活动表单和AJAX表单是干什么的?底层原理是什么?
115 0
|
安全 数据安全/隐私保护 对象存储
表单的 9 种设计技巧【上】
表单是信息添加、录入的通用形式,合理的表单设计能减轻用户负担。这里码匠提供了一些表单设计的简单技巧。
738 0
表单的 9 种设计技巧【上】