表单

最新推荐文章于 2024-04-30 08:58:14 发布
最新推荐文章于 2024-04-30 08:58:14 发布
阅读量428 收藏 7
点赞数 1
文章标签： php java python
原文链接：http://www.cnblogs.com/lszw/p/10505330.html
版权

表单，用于前台与后台数据交互，用于收集用户信息。在移动互联网出现之前，一度是互联网/软件收集信息的热门途经。

表单可以录入单选文本、多行文本、密码、数字、日期、文件等数据。

form

在html中，用<form></form>元素表示表单。

表单有两个常用的属性：

action 表示表单收集的信息给谁处理。通常表单收集的信息将给后台程序处理，目前流程的后台处理语言有PHP、Java、ASP、Python等。

method 表示表单以何种方式向后台传送数据，它有两个属性值：post和get。post在传送数据给后台前会将数据进行编码，数据到达服务器后再进行反编码。get的在将数据传送给后台时不会编码，所有数据会在URL（浏览器地址栏）上显示。通常使用post方式传送数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
< html >
     < head >
         < title >表单</ title >
         < meta charset = "UTF-8" >
         < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
     </ head >
     < body >
         < form action = "http://www.example.com/subscribe.php" method = "get" >
             < p >这是表单示例</ p >
         </ form >
     </ body >
</ html >

单行文本

<input>元素可以创建多种不同的表单控件，type属性决定它要创建哪种控件。

单行文本使用<input>元素创建，type属性值为text。

<input>元素还有些属性：

name 这属性选择服务器从哪获取数据。

size 属性指出单行文本显示的字符数量。通常是指最宽字符，如果使用小宽字符1则不止显示一个，使用字符m则刚刚好。

maxlength 属性可以限制输入字符数量。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
< html >
     < head >
         < title >单行文本</ title >
         < meta charset = "UTF-8" >
         < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
     </ head >
     < body >
         < form action = "http://www.example.com/subscribe.php" method = "get" >
             < p >用户名：< input type = "text" name = "username" size = "3" maxlength = "30" ></ p >
         </ form >
     </ body >
</ html >

密码框

在html中，密码框使用元素<input></input> 配合属性type，其值为password来完成。

其中属性name 、size、maxlength同单行文本中的作用意义一样。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
< html >
     < head >
         < title >密码框</ title >
         < meta charset = "UTF-8" >
         < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
     </ head >
     < body >
         < form action = "http://www.example.com/subscribe.php" method = "get" >
             < p >用户名：< input type = "text" name = "username" size = "20" maxlength = "30" ></ p >
             < p >密码：< input type = "password" name = "password" size = "20" maxlength = "30" ></ p >
         </ form >
     </ body >
</ html >

多行文本框

在html中使用<textarea></textarea>元素来创建多行文本框。

<textarea>元素有属性cols和rows，分别表示文本框的宽度和行数。可以不写，在实际应用中，通常使用css样式来控制宽度和长度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
< html >
     < head >
         < title >多行文本框</ title >
         < meta charset = "UTF-8" >
         < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
     </ head >
     < body >
         < form action = "http://www.example.com/subscribe.php" method = "get" >
             < label for = "content" >正文</ label >
             < textarea name = "username" id = "content" ></ textarea >
         </ form >
     </ body >
</ html >

单选按钮

单选按钮让用户从多个选项中只选择一项。在html中使用元素<input></input> 配合属性type，其值为radio来完成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
< html >
     < head >
         < title >单选按钮</ title >
         < meta charset = "UTF-8" >
         < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
     </ head >
     < body >
         < form action = "http://www.example.com/subscribe.php" method = "get" >
             < p >你最喜欢的编程语言是什么？</ p >
             < input type = "radio" name = "language" value = "css" checked = "checked" >CSS
             < input type = "radio" name = "language" value = "html" >HTML
             < input type = "radio" name = "language" value = "javascript" >JavaScript
         </ form >
     </ body >
</ html >

注意单选按钮的属性。

name属性告诉服务器从哪里获取数据，在单选按钮中，多个选项共用一个name属性值。

value属性，具体单选项的值。

checked属性，表示默认被选中的选项，其值也是checked。

复选框

复选框让用户在回答问题时有多个选项可选择。在html中使用元素<input></input> 配合属性type，其值为checkbox来完成。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
< html >
     < head >
         < title >复选框</ title >
         < meta charset = "UTF-8" >
         < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
     </ head >
     < body >
         < form action = "http://www.example.com/subscribe.php" method = "get" >
             < p >你喜欢吃的食物有哪些？</ p >
             < input type = "checkbox" name = "food" value = "dumpling" checked = "checked" >饺子
             < input type = "checkbox" name = "food" value = "fish meal" >鱼粉
             < input type = "checkbox" name = "food" value = "youtiao" >油条
         </ form >
     </ body >
</ html >

name属性告诉服务器从哪里获取数据，在单选按钮中，多个选项共用一个name属性值。

value属性，具体复选项的值。

checked属性，表示默认被选中的选项，其值也是checked。

下拉列表

下拉列表，也就是选择框，让用户选择其中一项。在html中使用元素<select></select>和<option ></option>元素来完成。

元素<select></select>表示下拉列表，有属性name告诉服务器从哪里获取数据。

<option ></option>元素表示下拉列表的选项，有属性value，即选中后的值，将和name一起发送到服务器。还有一个属性selected，其值也是selected，表示默认选中的下拉选项。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
< html >
     < head >
         < title >下拉列表</ title >
         < meta charset = "UTF-8" >
         < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
     </ head >
     < body >
         < P >下拉列表，也就是选择框，让用户选择其中一项。</ P >
         < select name = "interest" >
             < option value = "sing" >唱歌</ option >
             < option value = "broil" selected = "selected" >烧烤</ option >
             < option value = "read" >看书</ option >
         </ select >
     </ body >
</ html >

多选框

多选框是在下拉列表的基础上稍加变化，元素<select></select>添加一个属性multiple，其值也是multiple；再添加一个属性size，其值 是数字，用于显示多少个选项。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
< html >
     < head >
         < title >多选框</ title >
         < meta charset = "UTF-8" >
         < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
     </ head >
     < body >
         < select name = "interest" multiple = "multiple" size = "3" >
             < option value = "sing" >唱歌</ option >
             < option value = "broil" selected = "selected" >烧烤</ option >
             < option value = "read" >看书</ option >
             < option value = "game" >玩游戏</ option >
             < option value = "play basketball" >打篮球</ option >
         </ select >
     </ body >
</ html >

文件上传域

文件上传域通常用于上传文件，在html中使用元素<input></input> 配合属性type，其值为file来完成。

上传文件的表单，其method的值必须是post，否则不能上传文件。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
< html >
     < head >
         < title >文件上传域</ title >
         < meta charset = "UTF-8" >
         < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
     </ head >
     < body >
         < form action = "https://example.com/upload.php" >
             < p >上传附件</ p >
             < input type = "file" name = "file" >
         </ form >
     </ body >
</ html >

提交按钮

提交按钮用于表单发送到服务器。在html中使用元素<input></input> 配合属性type，其值为submit来完成。还有一个属性value，用于表示按钮上显示的文本信息。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
< html >
     < head >
         < title >文件上传域</ title >
         < meta charset = "UTF-8" >
         < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
     </ head >
     < body >
         < form action = "https://example.com/upload.php" method = "post" >
             < p >上传附件</ p >
             < input type = "file" name = "file" >
             < input type = "submit" value = "提交" >
         </ form >
     </ body >
</ html >

隐藏字段

隐藏字段表单这个字段不会在页面上显示，用户不需要知道，可是相关业务操作又会用这个字段。

在html中使用元素<input></input> 配合属性type，其值为hidden来完成。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
< html >
     < head >
         < title >隐藏字段</ title >
         < meta charset = "UTF-8" >
         < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
     </ head >
     < body >
         < form action = "https://example.com/upload.php" method = "post" >
             < input type = "hidden" name = "id" value = "3" >
         </ form >
     </ body >
</ html >

按钮

按钮是HTML元素之一，在表单里用得少，在网页中用得多。

在html中使用元素<button></button> 表示。按钮上显示的文字写在开始标签<button>和结束标签</button>之间。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
< html >
     < head >
         < title >按钮</ title >
         < meta charset = "UTF-8" >
         < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
     </ head >
     < body >
         < form action = "https://example.com/upload.php" method = "post" >
             < button  name = "btn" value = "abc" >这是按钮</ button >
         </ form >
     </ body >
</ html >

标签

标签用于说明。表单中的标签用于说明输入组件<input>。

在html中使用元素<label></label> 表示。有属性for，用于与输入组件<input>关联，for的值与输入组件<input>的id值相同。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
< html >
     < head >
         < title >标签</ title >
         < meta charset = "UTF-8" >
         < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
     </ head >
     < body >
         < form action = "https://example.com/upload.php" method = "post" >
             < label for = "username" >用户名：</ label >
             < input name = "username" type = "text" id = "username" >
         </ form >
     </ body >
</ html >

 

组合元素

组合元素可以将表单中的组件进行分组，这对于复杂的表单来说非常有用。

在html中使用元素<fieldset></fieldset> 表示组合元素，并将表单中逻辑关联性强的组件放到<fieldset></fieldset>元素内。

<legend></legend>元素用于说明分组的概述。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
< html >
     < head >
         < title >组合元素</ title >
         < meta charset = "UTF-8" >
         < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
     </ head >
     < body >
         < form action = "https://example.com/upload.php" method = "post" >
             < fieldset >
                 < legend >账号</ legend >
                 < label for = "username" >用户名：</ label >
                 < input name = "username" type = "text" id = "username" >< br >< br >
                 < label for = "password" >密码：</ label >
                 < input name = "username" type = "text" id = "password" >
             </ fieldset >
         </ form >
     </ body >
</ html >

转载于:https://www.cnblogs.com/lszw/p/10505330.html

weixin_30917213
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Python综合训练：学生信息管理
qq_52158457的博客
01-07 2353
一. 关系模式：学生(学号，姓名，性别，年龄，班级，专业，系部，电话) 学生表记录 学号 姓名 性别 年龄 班级 专业 系部 电话 2020001 李晓红 女 19 2020级软件四班 软件技术 信息工程学院 15945456780 2020002 王晓刚 男 18 2020级软件四班 软件技术 信息工程学院 13890904567 2020003 唐雨涵 女 19 2020级软件四班 软件技术 信息工程学院 18878789023 2020101 张三丰 男 18 2020
php面试题及答案(原创)
热门推荐
我的php学习与实践生涯
04-16 7万+
 基础题:1.表单中 get与post提交方法的区别?答:get是发送请求HTTP协议通过url参数传递进行接收,而post是实体数据,可以通过表单提交大量信息.2.session与cookie的区别?答:session:储存用户访问的全局唯一变量,存储在服务器上的php指定的目录中的（session_dir）的位置进行的存放   cookie:用来存储连续訪問一个頁面时所使用，是存储在客户端
文本信息在服务器如何存储,如何把表单文本域的内容存储到文本文件内
weixin_34695463的博客
08-05 463
资料谨供参考:下面的这段程序正是利用 ASP 读写文本文件的特性，在一个 WEB BBS 程序中创建自动记录每个用户发言记录的功能。如果你没有完全看懂上面的这段程序，就请听作者慢慢道来。 File Access 组件提供了可用来访问计算机文件系统的方法和属性。我们可以使用 File Access 组件创建 FileSystemObject 对象，以上程序的第一句就是利用 File Access 组...
python操作Excel
Bankofli的博客
05-28 573
wlrd 读取excel表中的数据 xlwt 创建一个全新的excel文件,然后对这个文件进行写入内容以及保存 xlutils 读取一个excel文件,然后进行修改或追加,不能操作xlsx,只能读xls 读excel表 #导入模块 import xlrd #打开excel文件 data = xlrd.open_workbook(r'C:\Users\907968\Desktop\test.xlsx') table1 = data.sheets()[0] #通过索引顺序获取 table2 = data.s.
12、HTML ＜form＞标签（表单）
you can you up up up的博客
10-29 572
从传统意义上讲，"表单"这个词指代的是一个文档，这个文档中有一些空白区域可供用户填写信息。区别于传统意义上的表单，HTML 中的表单不仅可以供用户填写信息还可以为用户提供信息。 例如，登录页面和注册页面使用的就是表单。当用户填写了相应信息后，这些信息就会经过表单服务器被提交到网站的后台，后台管理人员可以经过一系列操作拿到用户输入的信息来判断是否允许用户登录或注册。接下来我们看一下在网页中是如何使用表单的。 1. 简述<form>标签 HTML 中规定，使用 <form> 标签来表示表
form表单
JiuMeilove的博客
09-02 4万+
form表单详解form表单form表单简介form表单属性acceptaccept-charsetactionautocompleteenctypemethodnamenovalidatetargetHTML 表单输入元素文本域（Text Fields）密码字段单选按钮（Radio Buttons）复选框（Checkboxes）提交按钮(Submit Button)fieldset标签 标签 form表单 表单在Web网页中用以让访问者输入数据，当提交表单时，表单中输入的数据被打包传递给Web服务器端的程
22 JavaScript学习：表单验证
最新发布
百锦再的博客
04-30 8万+
JavaScript 表单验证是一种常用的前端技术，可以通过编写 JavaScript 脚本来对用户在表单中输入的数据进行验证，确保其格式和内容符合要求。但需要注意，前端验证只能作为一种辅助手段，真正的数据验证应该在后端进行，以确保数据的安全性和可靠性。其原理是在用户提交表单时，触发 JavaScript 函数进行对用户输入数据的验证，以确保其格式和内容符合预期。HTML5引入了一些新的表单输入类型和属性，可以在不编写JavaScript的情况下自动验证用户输入。最好根据具体需求和业务场景进行调整和优化。
vue如何实现自定义表单
静幽水
10-27 3万+
自定义表单是什么？ 自定义表单顾名思义就是由用户定义表单，由用户觉定标签和组件，决定要填写什么格式的数据，用过腾讯文档的收集表单的一定见过下面的页面，这就是自定义表单。 自定义表单能做什么？ 典型的使用场景是信息收集表单或者是投票表单，上面的图片会对应的生成下面的表单，由其他用户填写，从而达到收集数据的功能。 实现效果图： 效果图如下，可以自定义文本，数字，单选按钮，多选按钮，下拉框等组件： ...
bootstarp表单验证
05-10
Bootstrap表单验证是一种在网页开发中确保用户输入数据有效性的技术。Bootstrap，作为最流行的前端框架之一，提供了优雅的样式和组件，使开发者能够轻松创建响应式和美观的界面。结合jQuery，我们可以实现动态和交互...
全面解析Bootstrap表单使用方法（表单样式）
09-03
本篇文章将深入探讨Bootstrap表单的使用方法，特别是表单样式的应用。 一、基础表单 Bootstrap的基础表单主要由`<form>`标签、`<div class="form-group">`、`<label>`和`<input>`等元素构成。通过添加`.form-...
动态表单：VUE动态表单
08-13
在IT行业中，动态表单是一种常见且实用的功能，它允许用户根据特定需求自定义表单结构，无需预先编码。Vue.js作为一个轻量级且强大的前端框架，被广泛用于构建此类功能。Iview则是一个基于Vue的UI组件库，提供了丰富...
angular动态表单制作
08-27
Angular 动态表单制作技术详解 Angular 动态表单是一种灵活的表单制作方法，它可以根据用户的选择或服务器返回的信息进行重新配置，增加或删除表单元素等。Angular 动态表单的核心是组件生成和动态加载技术。 一、...
Django 表单
01-03
Django 表单 HTML表单是网站交互性的经典方式。 本章将介绍如何用Django对用户提交的表单数据进行处理。 HTTP 请求 HTTP协议以”请求－回复”的方式工作。客户发送请求时，可以在请求中附加数据。服务器通过解析...
自定义表单设计思路.docx
03-29
为了满足和现有工作流系统的耦合，在适当改动现有工作流的基础上，对自定义表单系统（包括与工作流相关）的设计做出如下的规划： 1.基础功能模块：部门、角色、人员信息、班组、岗位（这些都可能是潜在的流程参与者...
HTML基础——表单的使用
NCU_tanghulu的博客
08-02 271
HTML基础——表单 一、表单域 表单域是一个包含表单元素的区域。在HTML标签中，<form> 标签用于定义表单域,以实现用户信息的收集和传递。<form>会把它范围内的表单元素信息提交给服务器. 基本语法格式： <form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件 </form> 常用属性: action:用于指定接收并处理表单数据的服务器程序的url地址。 method:用于设置表单数据的提
表单的标签及其使用
szydqq的博客
03-09 4171
表单以及标签
Form 动态表单demo
09-13
在IT行业中，表单（Form）是用户与应用程序交互的重要组成部分，特别是在Web开发领域。一个动态表单（Dynamic Form）允许根据用户需求或特定场景自动生成或改变表单的结构和内容。本“Form动态表单demo”提供了一个...
万能表单 亲测可用
03-03
1、支持新建N个表单主题，解决所有表单的应用场景 2、自定义表单模型(自定义字段支持字符串、数字、单选、多选、下拉、日历、时间、邮件、省市区、上传图片)，每个自定义字段支持自定义描述(字段提示)，支持关联会员...
网页表单验证技术汇总
在网页设计中，表单验证是确保用户提交的数据符合预设条件的关键步骤。以下是一些常见的表单验证知识点： 1. **长度限制**：通过JavaScript函数检查输入字段的字符长度，例如，限制输入不超过50个字符，防止过长的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值