表单标签 form

表单是一个包含表单元素的区域
表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、输入框(input)、单选框（）

表单的作用

form标签作用是把用户输入数据信息提交到服务端。

表单用于向服务器传输数据，从而实现用户与Web服务器的交互

表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含textarea、select和 label标签。

form是块级标签，独占一行

1.语法

<form>允许出现表单控件</form>

1.属性 见下图：

属性 描述
accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。
action 规定向何处提交表单的地址（URL）（提交页面）。
autocomplete 规定浏览器应该自动完成表单（默认：开启）。
enctype 规定被提交数据的编码（默认：url-encoded）。
method 规定在提交表单时所用的 HTTP 方法（默认：GET）。
name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标（默认：_self）。

form是块级标签，独占一行

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <div class="form">

        <form>

            显示相关信息

        </form>

        <form>

            显示相关信息

        </form>

    </div>

</body>

</html>

action="url",  method定义表单提交数据的方法，默认是以get请求方式提交

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <div>

        <form action="http://www.baidu.com" method="get">

            <div>

                <label for="user">用户名:</label>

                <input id="user" name="username" type="text" placeholder="请输入用户名">

            </div>

            <div>

                <label for="pwd">密码 :</label>

                <input id="pwd" name="password" type="password" placeholder="请输入密码">

            </div>

            <input type="submit" value="提交">

        </form>

    </div>

</body>

</html>

输入值按下按钮，提交到百度

url上显示提交的值,是发送get请求，username和password是input标签的name属性的值，mike,密码123是我在文本输入框输入的value值。

表单控件分类 见下图

前端 HTML body标签相关内容 常用标签 表单标签 form的更多相关文章

  1. Struts2的标签库（五）——表单标签

    Struts2的标签库(五) --表单标签 几个特殊的表单标签的使用: 1.checkboxlist标签 该标签用于创建多个复选框,用于同时生成多个<input type="check ...

  2. （三）HTML中的列表标签、框架集及表单标签

    一.HTML的列表标签 在网页中,经常可以看到,有的内容排列如同word里面的项目编号,这就是HTML的无序排列和有序排列起到的作用.. HTML之无序排列:<ul></ul> ...

  3. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 input标签介绍

    input标签用于接收用户输入.可以利用input 可以做登录页面 input标签是行内块标签 <input> 元素会根据不同的 type 属性,变化为多种形态. name属性:表单点击提 ...

  4. 前端 HTML body标签相关内容 常用标签 表单标签 form 表单控件分类

    表单控件分类 input标签: input标签 type属性的text,password,button按钮,submit按钮 input标签placeholder属性 标签上显示内容 input标签 ...

  5. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 label标签介绍

    定义:<label> 标签为 input 元素定义标注(标记). label标签功能:关联input标签文本与表达元素,点击input标签文本时,如同点击表单元素一样. label标签是行 ...

  6. 前端 HTML body标签相关内容 常用标签 表格标签 table

    表格标签 table 表格由<table> 标签来定义.每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由<td>标签定义).字母 td 指表 ...

  7. 前端 HTML body标签相关内容 常用标签 超链接标签 a标签

    超链接标签 <a> 超级链接<a>标记代表一个链接点,是英文anchor(锚点)的简写.它的作用是把当前位置的文本或图片连接到其他的页面.文本或图像,也可以是相同网页上的不同位 ...

  8. 前端 HTML body标签相关内容 常用标签 段落标签 p标签

    段落标签 <p>,paragraph的简写.定义段落,默认段落之间有间隔的 浏览器展示特点: 跟普通文本一样,但我们可以通过css来设置当前段落的样式 是否又独占一行呢? 答案是的 块级元 ...

  9. 前端 HTML body标签相关内容 常用标签 标题标签 h1-h6

    标题标签 h1~h6 <h1> - <h6> 标签可定义标题.<h1> 定义最大的标题.<h6> 定义最小的标题. 由于 h 元素拥有确切的语义,因此请 ...

随机推荐

  1. java指纹识别+谷歌图片识别技术_源代码

    主类: import java.awt.image.BufferedImage; import java.util.ArrayList; import java.util.List; public c ...

  2. mysql delete两种关联删除方式

    基本格式:  DELETE t1 FROM t1,t2 WHERE t1.id=t2.id 或 DELETE FROM t1 USING t1,t2 WHERE t1.id=t2.id  示例应用: ...

  3. 【01月22日】A股滚动市盈率PE最低排名

    深康佳A(SZ000016) - 滚动市盈率PE:1.55 - 滚动市净率PB:1.03 - 滚动年化股息收益率:4.71% - - - 深康佳A(SZ000016)的历史市盈率走势图 华菱钢铁(SZ ...

  4. Maven支撑下的War应用依赖另外一个WAR应用的解决方案

    最近在做项目中,用Maven管理项目间的依赖关系,遇到一个问题,快折腾死了,不过初步试出来一种解决方案.在此把问题及解决方案描述一下,以资共享.   问题描述:有两个项目A和B,Dynamic Web ...

  5. [Algorithm] *String Matching and Hashing

    Link: Computer Algorithms: Rabin-Karp String Searching 为了避免挨个字符对文本和模式串进行比较,我们可以尝试一次性判断两者是否相等. 因此,我们需 ...

  6. [React] 06 - Route: koa makes your life easier

    听说koa比express更傻瓜化,真的? Koa 框架教程 本身代码只有1000多行,所有功能都通过插件实现,很符合 Unix 哲学. 搭建简单服务器 Koa, 架设一个简单的服务器 // demo ...

  7. <aop:aspectj-autoproxy />作用

    通过配置织入@Aspectj切面 虽然可以通过编程的方式织入切面,但是一般情况下,我们还是使用spring的配置自动完成创建代理织入切面的工作. 通过aop命名空间的<aop:aspectj-a ...

  8. cocos2dx内存管理

    cocos2dx基于引用计数管理内存,所有继承自CCObject的对象都将获得引用计数的能力,可通过调用retain成员函数用于引用计数值,调用release减少引用计数值,当计数值减为0时销毁对象. ...

  9. 【转载】eclipse常用插件在线安装地址或下载地址

    一,反编译插件: A.Jadclipse 1.打开eclipse增加站点:http://jadclipse.sf.net/update,在线安装好JDT Decompiler 3.4.0 2.http ...

  10. Javascript阿拉伯数字转中文

    Javascript阿拉伯数字转中文 template.helper('_toChinese', function (number) { /* * 单位 */ var units = '个十百千万@# ...