HTML 18.1 表单概述

HTML 18.1 表单概述

注：form 表格，形式

例句：We stand out the breakup in any form. 我们坚决反对任何形式的分裂行为。

一．表单form用于用户输入数据。

结构：

<form>

  表单元素

</form>

例如：

<form>

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

  <input type="radio" name="sex" value="female" /> Female

</form>

结果：

 

二．form的属性

1.action属性，规定向何处提交表单的地址（URL）（提交页面）

例如：<form action="action_page.php">

注1：向服务器提交表单的通常做法是使用提交按钮。通常，表单会被提交到web服务器上的网页。

注2：如果省略 action 属性，则action会被设置为当前页面。

注3：向web服务器提交的表单类似于：name=“value”

<form action="action_page.php">
  姓名：<input type="text" name="name" id="name" /><br/>
  <input type="radio" name="sex" value="male" />Male<br/>
  <input type="radio" name="sex" value="female" />Female<br/>
  <input type="checkbox" name="hobby" value="football" />Football<br/>
  <input type="checkbox" name="hobby" value="basketball" />Basketball<br/>
  <input type="checkbox" name="hobby" value="swimming" />Swimming<br/>
  <select name="state">
    <option value="china">China</option>
    <option value="england">England</option>
    <option value="anerica">America</option>
  </select>
  <input type="submit" />
</form>

点击submit之后，浏览器会将如下数据传送给web服务器，web服务器传给web应用程序。

name=王小明

sex=male

hobby=football&basketball

state=china

2.method 属性，规定在提交表单时所用的 HTTP方法（GET 或 POST）：

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

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

①GET（省略method时，默认GET）

GET用于：表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

注1：当您使用 GET 时，表单数据在页面地址栏中是可见的：

     action_page.php?firstname=Mickey&lastname=Mouse

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

②POST

POST用于：表单正在更新数据，或者包含敏感信息（例如密码）

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

3.其他

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

三．表单元素的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>

 注1：对于input type=”text/password”、select、textarea每一个的name都不同。

注2：对于input type=”radio/checkbox”，同一组name相同。

注3：对于option，没有name，其与select组合使用，

注4：对于button/submit，没有name

四．用 <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>

结果：

五．表单元素

表单元素包括：input输入、select下拉、option下拉菜单中的选项、textarea多行输入字段（文本域）、button可点击的按钮

六．表单元素的输入类型

输入类型包括：text文本、password密码、radio单选框、checkbox复选框、submit提交、button定义按钮

注：只有表单元素input和button才有输入类型type

七．表单元素属于行内可替换元素，所以可以设置宽高

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" style="border-color:red;height:20px; width:100px;" /><br /><br />
  <input type="submit" style="border-color:red;" />
</form>

结果：

八．表单元素的输入属性

输入属性包括：value初始值、readonly只读、disabled禁用、size尺寸、maxlength最大长度

八．表单知识示意图：

表单 <form> </form> 属性：action， method	<input />	<input type=”radio/checkbox” name=”” value=”” checked/>
		<input type=”text/password” name=”” value=”” />
		<input type=”submit” value=”” />
		<input type=”button” οnclick=”alert(‘Hello’)” value=”click me” />
	<button> </button>	<button type=”button” οnclick=”alert(‘Hello’)”>click me</button> 与上面input type=”button”效果相同,但不同的浏览器可能会提交不同的按钮值。请使用 <inpput>在 HTML 表单中创建按钮。

<textarea>

</textarea>

<textarea name=”” rows=”” cols=””>可以不写，写了相当于value初始值</textarea>

<selece>

</select>

<select name=”country”>

  <option value=”China” selected>China</option>

</select>

红色属性表示必须有，绿色属性表示可以没有