HTML 表单

<form>标签

HTML的表单用来接收用户录入的信息.

<form>元素定义一个HTML表单:

<form>
.
表单元素
.
</form>

表单元素写到HTML表单内.

表单元素有:文本框、单选框、复选框、提交按钮等等.

<input>元素

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

有各种各样的<input>元素,取决于定义的type属性是什么

本章用到的属性有:

类型(type)	描述
text	定义普通的文本输入框
radio	定义单选按钮
submit	定义表单的提交按钮

在本教程后面将学习更多关于输入框的类型.

文本输入框

<input type="text" >定义一个行内的文本输入框

例子

<form>
  姓:<br>
  <input type="text" name="firstname"><br>
  名:<br>
  <input type="text" name="lastname">
</form>

注意:表单本身是不可见的.记住一个文本框的默认长度是20字符的长度.

单选框按钮

< type="radio" >定义一个单选按钮

单选按钮允许用户从多个选项中选中一项:

例子

<form>
  <input type="radio" name="gender" value="male" checked> 男人<br>
  <input type="radio" name="gender" value="female"> 女人<br>
  <input type="radio" name="gender" value="other"> 其它
</form>

下面是解析结果:

提交按钮

<input type="submit">定义表单的提交按钮.

表单通常用来提交数据给服务器,然后服务器脚本语言处理提交的数据.

表单的提交链接写在<form>标签的action属性里:

例子

<form action="action_page.php">
  姓氏:<br>
  <input type="text" name="firstname" value="王"><br>
  名字:<br>
  <input type="text" name="lastname" value="小"><br><br>
  <input type="submit" value="提交">
</form>

解析结果:

action属性

action属性定义表单提交到服务器的链接.

常用的表单提交到服务器的方法是用提交按钮.

一般地,表单都是提交到服务器处理.

在上面的例子中,指定服务端脚本来处理提交的表单.

<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方法最适合数据量少.浏览器对于GET方法有大小限制的.

什么时候用POST?

你应该在下面这几种情况下用:

如果表单用来上传文件,或包含敏感信息(密码).

POST提供更好的安全,因为提交的数据不会在地址栏中显示.

name属性

为了正确的提交数据,每个input域都必须有一个name属性

这个表单只会提交带有name属性的input:

例子

<form action="action_page.php">
  姓氏:<br>
  <input type="text" value="向"><br>
  名字:<br>
  <input type="text" name="lastname" value="阳"><br><br>
  <input type="submit" value="提交">
</form>

用<fieldset>对表单元素分组.

用<fieldset>把相关联的数据进行分组

<legent>元素定义<fieldset>元素的标题

例子

<form action="action_page.php">
  <fieldset>
    <legend>私人信息:</legend>
    姓氏:<br>
    <input type="text" name="firstname" value="向"><br>
    名字:<br>
    <input type="text" name="lastname" value="阳"><br><br>
    <input type="submit" value="提交">
  </fieldset>
</form>

下面是解析结果:

HTML表单属性

HTML的<form>元素的全部可能的属性,例如:

<form action="action_page.php" method="post" target="_blank"
 accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded"
 autocomplete="off" novalidate>
.
表单元素
.
</form>

下面都是关于<form>的属性:

属性	描述
accept-charset	指定表单提交用什么字符集(默认为页面所用字符集)
action	指定表单提交到服务器的地址(url)(默认为当前页).
autocomplete	指定浏览器是否自动填充表单历史数据(默认开启).

enctype	指定表单提交数据所用的编码(默认是url编码)
method	指定表单用什么方法提交(默认:GET).
name	指定表单的名字用于唯一标识(DOM用法:document.forms.name)
novalidate	指定浏览器不应该验证表单.
target	指定表单提交后返回到哪里(默认:当前页).

你将在下一章学习到更多关于表单属性的知识.

评论区

21技术 www.21xrx.com 备案号：蜀ICP备17043188号-2

其它

提取图片文字免费的JetBrains license services json在线解析 base64加解密文章搜索