表单主要是用来收集客户端提供的相关信息,提供了用户数据录入的方式,有多选、单选、单行文本、下拉列表等输入框,便于网站管理员收集用户的数据,是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁.

表单被form标签包含,内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。当用户输入好数据后,就可以把表单数据提交到服务器端。

一个表单元素有三个基本组成部分:

  • 表单标签,包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。

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

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

在HTML中创建表单用form标签。每个表单都可以包含一到多个表单域或按钮。form标签常用的属性如下:

属性 描述
action 访问服务器地址 服务器端表单处理程序的URL地址
method post、get[默认值] 表单数据的提交方法
target 参考超链接的target属性 表单数据提交时URL的打开方式
enctype application/x-www-form-urlencoded[默认值] multipart/form-data [用于文件上传] text/plain [用于纯文本数据发送] 表单提交数据时的编码方式

例子:

<h3>用户注册</h3>

  <form action="http://127.0.0.1:8800" method="get">
<p><label for="user">姓名</label>: <input type="text" name="user" id="user"></p>
<p>密码: <input type="password" name="pwd"></p>
<p>爱好:
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="shuangseqiu" checked>双色球
</p>
<p>性别:
<input type="radio" name="gender" value="men">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="qita">其他
</p>
<p>生日:<input type="date" name="birth"></p> <p>籍贯:
<select name="province" id="" multiple size="2">
<option value="">广东省</option>
<option value="" selected>山东省</option>
<option value="">河北省</option>
</select>
</p>
<p>
<textarea name="" id="" cols="30" rows="10" placeholder="个人简介"></textarea>
</p> <div>
<p><input type="reset" value="重置"></p>
<p><input type="button" value="普通按钮"></p>
<p><button>普通按钮</button></p>
<p><input type="submit" value="提交"></p>
</div> </form>

  

———— form标签的所有属性:


<form> 标签的所有属性
所有属性 描述
action 规定用户点击提交按钮时,表单被提交到的位置。
method 规定表单提交时所使用的 http 请求方法,只能是 get 或 post 中的任意一种。
name 定义表单的名称,不能包含特殊字符和空格。
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
autocomplete 规定浏览器应该自动完成表单(默认:开启)。
enctype 规定被提交数据的编码(默认:url-encoded)。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标(默认:_self)。

HTML——form表单的更多相关文章

  1. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

  2. Form 表单提交参数

    今天因为要额外提交参数数组性的参数给form传到后台而苦恼了半天,结果发现,只需要在form表单对应的字段html空间中定义name = 后台参数名 的属性就ok了. 后台本来是只有模型参数的,但是后 ...

  3. form表单 ----在路上(15)

    form 表单就是将用户的信息提交到服务器,服务器会将信息存储活着根据信息查询数据进行增删改查,再将其返回给用户. 基本格式: <form action="" method ...

  4. form表单的字符串进行utf-8编码

    <form>表单有assept-charset属性.该属性规定字符的编码方式,默认是"unknown",与文档的字符集相同. 该属性除了Internet explore ...

  5. 细说 Form (表单)

    细说 Form (表单) Form(表单)对于每个WEB开发人员来说,应该是再熟悉不过的东西了,可它却是页面与WEB服务器交互过程中最重要的信息来源. 虽然Asp.net WebForms框架为了帮助 ...

  6. 通过form表单的形式下载文件。

    在项目中遇到问题,要求动态拼接uri下载文件.但是由于项目的安全拦截导致window.location.href 和 window.open等新建窗口的方法都不行. 无意间百度到了通过form表单来下 ...

  7. form 表单跨域提交

    <!DOCTYPE html><html> <head> <title>form 表单上传文件</title> <script src ...

  8. form表单的属性标签

    form表单的常用标签 表单: <form id="" name="" method="post/get" action=" ...

  9. form表单的属性标签和练习

    form表单的标签 做一个如下图的form表单: 我们的代码如下: <body leftmargin="400px" topmargin="200px"& ...

  10. Django基础,Day5 - form表单投票详解

    投票URL polls/urls.py: # ex: /polls/5/vote/ url(r'^(?P<question_id>[0-9]+)/vote/$', views.vote, ...

随机推荐

  1. Minio架构简介

    简介 Minio是一个go编写基于Apache License v2.0开源协议的对象存储系统,是为海量数据存储.人工智能.大数据分析而设计,它完全兼容Amazon S3接口,十分符合存储大容量的非结 ...

  2. MindSpore编译构建后Vmap模块的RuntimeError问题

    技术背景 这篇文章来源于MindSpore仓库中的一个Issue,简单描述问题就是,如果你用MindSpore开发了一个python软件供别人使用,那么很有可能涉及到编译构建的问题.但是如果直接使用编 ...

  3. 论文解读:Cellpose在细胞分割领域的应用

    细胞分割与Cellpose 基于显微镜图像的单细胞分析是目前生命科学领域的前沿和热点问题.细胞分割能对成像图片进行批量处理,将其形态.位置.RNA 表达和蛋白质表达等信息赋予识别出的每个细胞.比如: ...

  4. HDC2021技术分论坛:鸿蒙智联设备开发,这五大法宝你应该拥有

    作者:zhaowenguang,dinglu, 华为高级工程师 Huawei LiteOS是轻量级的开源物联网操作系统.智能硬件使能平台,可广泛应用于智能家居.穿戴式.车联网.制造业等领域,使物联网终 ...

  5. 动态规划(三)——线性dp

    一.概念 具有线性阶段划分的动态规划算法叫作线性动态规划(简称线性DP).若状态包含多个维度,则每个维度都是线性划分的阶段,也属于线性DP,如下图所示: 二.线性dp的三大经典例题 1.LIS问题:求 ...

  6. C#开发的PhotoNet看图软件 - 开源研究系列文章 - 个人小作品

    这几天忙于编程.上次发布了壁纸管理器的插件版( https://www.cnblogs.com/lzhdim/p/18074135 ),然后整理和添加了一下相关的壁纸图片文件,虽然在管理器中也能浏览壁 ...

  7. UML 哲学之道——领域模型[四]

    前言 简单整理一下领域模型. 正文 领域模型是对领域内的概念类或现实中的对象的可视化表示 领域模型也称概念模型.领域对象模型和分析对象模型 领域模型是可以在业务建模科目中创建的制品之一 领域模型是up ...

  8. c# seo 百度sitemap书写

    前言 我们知道对页面百度收录,有两种方式: 1.百度自己抓取. 2.自己提交sitemap让百度来抓取. sitemap 一般的一个业务逻辑是: 生成sitemap xml,然后每隔一段时间更新即可, ...

  9. redis如何在保持读写分离+高可用的架构下,还能横向扩容支撑1T+海量数据

    单机redis在海量数据面前的瓶颈. 怎么才能够突破单机瓶颈,让redis支撑海量数据? redis集群架构 redis cluster 支撑N个redis master node,每个master ...

  10. 说说你对Node.js 的理解?优缺点?应用场景?

    一.是什么 Node.js 是一个开源与跨平台的 JavaScript 运行时环境 在浏览器外运行 V8 JavaScript 引擎(Google Chrome 的内核),利用事件驱动.非阻塞和异步输 ...