HTML表单学习1——表单基础

HTML表单用于搜集不同类型的用户输入

1，form元素用于定义表单

例子：

<form>
.
hello
.
</form>

2，input元素

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

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

常见的类型：

text  定义常规文本的输入

radio  定义单选按钮输入（多个按钮选择之一）

submit  定义提交按钮（提交表单）

 

文本输入：

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

例子：

<form>
Name:
<input  type=”text” name=”name” value=”chen”>   <--文本类型，变量名为name ，默认值为chen-->
<br>    <--换行-->
</form>

单选按钮：

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

例子：

<from>
男
<input type=”radio” name=”sex”  value=”male” checked>
<br>
女：
<input type=”radio” name=”sex”  value=”female”>
<br>
</form>

提交按钮

<input type=”submit”>定义提交按钮

例子：

<form action=”text.php”>
Name:
<input type=”text” name=”name” value=”chen”>
<br>
Age：
<input type=”text” name=”age” value=”23”>
<br>
<input type=”submit” value=”submit”>
</form>

3，action属性

action属性用于定义表单提交时执行的动作

向服务器提交表单的通常做法是使用提交按钮，并且表单通常呗提交到web服务器的网页上。

例子：

<form action=”./test.php”>    <--被提交到当前路径下的test.php文件里-->

 

4，method属性

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

例子：

<form action=”./test.php” method=”GET”>
<form action=”./test.php” method=”POST”>

何时使用GET：

默认使用GET

使用GET提交时会在URL中显示所提交的信息，所以不够安全。GET适合少量数据的提交，浏览器会设定容量限制。

何时使用POST：

POST是比较好的，不会在URL中显示，非常的安全。

 

5，Name属性：

如果想要正确的提交，必须设定一个name属性。

 

6，用fieldset组合表单数据

例子：

<form action=”./test.php”>
<fieldset>
<legend>个人信息</legend>
Name:
<input type=”text” name=”name” value=”chen”>
<br>
Age：
<input type=”text” name=”age” value=”23”>
<br>
<input type=”submit” value=”submit”>
</fieldset>
</form>

 

7，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> 

描述：

accept-charset

规定在被提交表单中使用的字符集（默认：页面字符集）。

action

规定向何处提交表单的地址（URL）（提交页面）。

autocomplete

规定浏览器应该自动完成表单（默认：开启）。

enctype

规定被提交数据的编码（默认：url-encoded）。

method

规定在提交表单时所用的 HTTP方法（默认：GET）。

name

规定识别表单的名称（对于 DOM使用：document.forms.name）。

novalidate

规定浏览器不验证表单。

target

规定 action属性中地址的目标（默认：_self）。

8，杂

注释：

<!--被注释的内容-->

换行：

<br>

空格：

&nbsp

完！！