HTML 表单

HTML 表单用于收集用户输入。<form> 元素定义 HTML 表单：

1
2
3
4
5
<form>
 .
form elements
 .
</form>

HTML 表单属性

Action 属性

action 属性定义提交表单时要执行的操作。

通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中。

Method 属性

method 属性指定提交表单数据时要使用的 HTTP 方法。

表单数据可以作为 URL 变量（使用 method="get"）或作为 HTTP POST 事务（使用 method="post"）发送。

提交表单数据时，默认的 HTTP 方法是 GET。

HTML 表单元素

<input> 元素

<input> 元素根据不同的 type 属性，可以变化为多种形态。value 属性规定输入字段的初始值。maxlength 属性规定输入字段允许的最大长度……

文本输入

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

1
2
3
4
5
6
7
<form>
 First name:<br>
<input type="text" name="firstname">
<br>
 Last name:<br>
<input type="text" name="lastname">
</form>
效果
First name:

Last name:

密码输入

<input type="password"> 定义密码字段：

1
2
3
4
5
6
7
<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw">
</form>
效果
User name:

User password:

单选框

<input type="radio"> 定义单选框：

1
2
3
4
5
<form>
<input type="radio" name="sex" value="male">Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
效果
Male
Female

复选框

<input type="checkbox"> 定义复选框：

1
2
3
4
5
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>
效果
I have a bike
I have a car

提交按钮

<input type="submit"> 定义用于向表单处理程序提交表单的按钮：

1
2
3
4
5
6
7
8
9
10
11
12
13
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Haitao">
<br>
Last name:<br>
<input type="text" name="lastname" value="Wu">
<br><br>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
<br><br>
<input type="submit" value="Submit">
</form>
效果
First name:

Last name:


Male
Female

<select> 元素

<select> 元素定义下拉列表：

1
2
3
4
5
<select name="cars">
<option value="porsche">porsche</option>
<option value="bmw">bmw</option>
<option value="audi">audi</option>
</select>
效果

<textarea> 元素

<textarea> 元素定义多行输入字段（文本域）：

1
2
3
<textarea name="textarea" rows="10" cols="30">
Write something here.
</textarea>
效果

<button> 元素

<button> 元素定义可点击的按钮：

1
<button type="button" onclick="alert('(｡･∀･)ﾉﾞ嗨')">点我！</button>
效果

HTML 画布

<canvas> 元素用于在网页上绘制图形。<canvas> 元素本身是没有绘图能力的，所有的绘制工作必须在 JavaScript 内部完成。

实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.beginPath();
context.moveTo(100,10);
context.lineTo(150,50);
context.lineTo(50,50);
context.closePath();
context.strokeStyle="red";
context.stroke();
context.beginPath();
context.arc(100,80,10,0,Math.PI*2,true);
context.closePath();
context.strokeStyle="blue";
context.stroke();
</script>
效果
Your browser does not support the canvas element.