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服务器的网页上。

例子：

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

完！！

更多相关文章

随机推荐