<input> 元素

<input> 元素是最重要的表单元素。

<input> 元素有很多形态,根据不同的 type 属性。

这是本章中使用的类型:

类型 描述
text 定义常规文本输入。
radio 定义单选按钮输入(选择多个选择之一)
submit 定义提交按钮(提交表单)

这里列出了一些常用的输入限制(其中一些是 HTML5 中新增的):

属性 描述
disabled 规定输入字段应该被禁用。
max 规定输入字段的最大值。
maxlength 规定输入字段的最大字符数。
min 规定输入字段的最小值。
pattern 规定通过其检查输入值的正则表达式。
readonly 规定输入字段为只读(无法修改)。
required 规定输入字段是必需的(必需填写)。
size 规定输入字段的宽度(以字符计)。
step 规定输入字段的合法数字间隔。
value 规定输入字段的默认值。

文本输入

<input type="text"> 定义用于文本输入的单行输入字段:

实例

<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

单选按钮输入

<input type="radio"> 定义单选按钮。

单选按钮允许用户在有限数量的选项中选择其中之一:

实例

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

提交按钮

<input type="submit"> 定义用于向表单处理程序(form-handler)提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定:

实例

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

Action 属性

action 属性定义在提交表单时执行的动作。

向服务器提交表单的通常做法是使用提交按钮。

通常,表单会被提交到 web 服务器上的网页。

在上面的例子中,指定了某个服务器脚本来处理被提交表单:

<form action="action_page.php">

如果省略 action 属性,则 action 会被设置为当前页面。

Method 属性

method 属性规定在提交表单时所用的 HTTP 方法(GET 或 POST):

<form action="action_page.php" method="GET">

或:

<form action="action_page.php" method="POST">

何时使用 GET?

您能够使用 GET(默认方法):

如果表单提交是被动的(比如搜索引擎查询),并且没有敏感信息。

当您使用 GET 时,表单数据在页面地址栏中是可见的:

action_page.php?firstname=Mickey&lastname=Mouse

注释:GET 最适合少量数据的提交。浏览器会设定容量限制。

何时使用 POST?

您应该使用 POST:

如果表单正在更新数据,或者包含敏感信息(例如密码)。

POST 的安全性更加,因为在页面地址栏中被提交的数据是不可见的。

Name 属性

如果要正确地被提交,每个输入字段必须设置一个 name 属性。

本例只会提交 "Last name" 输入字段:

实例

<form action="action_page.php">
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

用 <fieldset> 组合表单数据

<fieldset> 元素组合表单中的相关数据

<legend> 元素为 <fieldset> 元素定义标题。

实例

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

HTML Form 属性

HTML <form> 元素,已设置所有可能的属性,是这样的:

实例

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
.
</form>

下面是 <form> 属性的列表:

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

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

  1. angular4 Form表单相关

    ng4中,有两种方式去声明一个表单 一:Template-Driven Forms - 模板驱动式表单   [引入FormsModule] 1.ngForm赋值 [可以方便的获取表单的值] <f ...

  2. JS之Form表单相关操作

    获取ID组件的值 var userid=document.getElementById('userid').value;var cdkey=document.getElementById('cdkey ...

  3. Form 表单相关小技巧

    JS ---textarea 高度自适应 var realH = this.scrollHeight + 10+ "px"; $(this).css("height&qu ...

  4. 按下回车默认提交form表单问题

    最近开发中碰到一个问题,项目中有几个列表展示页面,允许用户通过查询条件模糊查询数据.用户录入关键字后点击回车会调用查询方法根据关键字查询,原先功能没有问题,但是最近发现在查询输入框中按下回车会直接刷新 ...

  5. 霸气側漏的HTML5--之--强大的form表单

    今天学习了一下html5,发现他真的太强大了,暂不说新增的画布,通信,本地存储等的炸天功能,就连表单也是异常的好用.忍不住发一篇博客和大家分享一下.原谅我标题党了.以后的html5的学习记录博文就以& ...

  6. 表单相关标签之form标签

    表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含 menus.textarea.fieldset.legend 和 label 元素以及其它块级元素 表单用 ...

  7. 细说 Form (表单)

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

  8. form 表单跨域提交

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

  9. form表单的属性标签

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

随机推荐

  1. React里单页面div自适应浏览器高度占满屏幕

    可以用绝对定位方式,让div占满屏幕,css样式如下: height: 100%; width: 100%; position: absolute; top: 0px; bottom: 0px;

  2. div固定在浏览器的最上方,不随滚动条滚动

    #topDIV { position: fixed; ; ; width: 100%; height: 35px; border-bottom: 1px solid #eee; background- ...

  3. JAVA 基础编程练习题1 【程序 1 不死神兔】

    1 [程序 1 不死神兔] 题目:古典问题:有一对兔子,从出生后第 3 个月起每个月都生一对兔子,小兔子长到第三个月后每个月 又生一对兔子,假如兔子都不死,问每个月的兔子对数为多少? 程序分析: 兔子 ...

  4. 直连路由onlink

    根据路由器学习路由信息.生成并维护路由表的方法包括直连路由(Direct).静态路由(Static)和动态路由(Dynamic).直连路由:路由器接口所连接的子网的路由方式称为直连路由:非直连路由:通 ...

  5. playbook部署coredns

    playbook部署coredns 说明test1是主控节点,目的是给test4 node节点安装coredns, 1.coredns-1.2.2.tar.gz安装包放到主控节点/server/sof ...

  6. DES算法概述

    DES全称为Data Encryption Standard,即数据加密标准.1997年数据加密标准DES正式公布,其分组长度为64比特,密钥长度为64比特,其中8比特为奇偶校验位,所以实际长度为56 ...

  7. python 粘包现象

    一. 粘包现象 1. 粘包现象的由来(1)TCP属于长连接,当服务端与一个客户端进行了连接以后,其他客户端需要(排队)等待.若服务端想要连接另一个客户端,必须首先断开与第一个客户端的连接. (2)缓冲 ...

  8. ubuntu14+ns2

    https://www.linuxidc.com/Linux/2017-03/141504.htm 环境变量改为: export PATH=$PATH:/home/zgh/Desktop/ns-all ...

  9. Python学习笔记——以函数为参数的内置函数

    1.用法 一个参数 def ds(x): return 2 * x + 1 print(ds(5)) 11 g = lambda x : 2 * x + 1 print(g(5)) 11 两个参数 d ...

  10. 【计算机视觉】Histogram of Oriented Gridients(HOG) 方向梯度直方图

    Histogram of Oriented Gridients(HOG) 方向梯度直方图 Histogram of Oriented Gridients,缩写为HOG,是目前计算机视觉.模式识别领域很 ...