<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. ubuntu 18.04 64bit下如何启动向日葵远程控制端软件?

    一. 背景 从向日葵官网下载了linux版向日葵远程控制端软件,解压后直接执行Sunlloginremote发现以下错误: jello@jello:~/sunlogin_remote_linux$ . ...

  2. Oracle事务、视图、序列

    回顾什么是事务? 一个不可分割的子操作形成一个整体,该整体要么全部执行成功,要么全部执行失败.例如:转帐 回顾为什么要用事务? 如果不用事务的话,为转帐为例,可能出现一个用户钱增加了,另一个用户钱不变 ...

  3. Hibernate3核心API使用

    public static void main(String[] args) throws Exception{ // 1. 加载默认的hibernate.cfg.xml的配置文件 Configura ...

  4. [Java复习] Java基础 Basic

    Q1面向对象 类.对象特征? 类:对事物逻辑算法或概念的抽象,描述一类对象的行为和状态. OOP三大特征,封装,继承,多态 封装:隐藏属性实现细节,只公开接口.将抽象的数据和行为结合,形成类.目的是简 ...

  5. Understanding decimal(p, s) of sqlite3

    带固定精度和小数位数的数值数据类型.decimal(p[ ,s]) 和 numeric(p[ ,s]) 固定精度和小数位数. 使用最大精度时,有效值的范围为 - 10^38 +1 到 10^38 - ...

  6. ansible简单入门

    1,结构框架 Ansible 使用的是无代理体系结构,这种体系结构可以通过防止节点轮询控制机器来减少网络开销.Ansible 提供的结果框架如下所示: Ansible :运行在中央计算机上: Conn ...

  7. 连接服务器VNC

    1,启动vnc vncserver 2,提示输入密码 3,Would you like to enter a view-only password (y/n)?  选择n 4,会生成一个端口号 5, ...

  8. A股委托类型

    上海交易所于2006年8月7日启用了两种类型的市价委托,分别为:“最优五档即时成交剩余撤销”.“最优五档即时成交剩余转限价”. 深圳证券交易所启用了“对手方最优价格委托”.“本方最优价格委托”.“最优 ...

  9. CentOS8 缺少 libglade2 安装包的回避方法

    某些gtk2应用程序需要libglade2安装包,但不知为何CentOS的yum仓库里没有此包, 经测试,可手动安装CentOS7的rpm包安装解决. 更新:使用下面一行即可.sudo yum ins ...

  10. 关于Content-Type中application/x-www-form-urlencoded 和 multipart/form-data的区别及用法

    http://blog.csdn.net/soonfly/article/details/52082547 Form的enctype属性表示页面表单数据向服务器传输时的编码方式, 常用有两种:appl ...