HTML基础（二）表单，图片热点，网页划区和拼接

程序员文章站 2022-06-02 10:14:55

...

一、表单

1、文本输入

文本框

注：上面设置value值，表示设置默认值

密码框

文本域

隐藏域

2、按钮

提交按钮点击后转到form内的提交服务器的地址

注：上面中设置value值表示运行时上面显示的文字。

重置按钮

普通按钮

图片按钮

附：

disabled，使按钮失效；enable，使可用。

3、选择输入

单选按钮组 name的值用来分组；value值看不见，是提交给程序用的；checked，设置默认选项。

注：单选按钮组选中后不可取消。

复选框组

注：checked="checked"表示一上来就选中，且复选框可选中可取消。

文件上传

标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

标签的 for 属性应当与相关元素的 id 属性相同。

下拉列表框

--selected，设为默认

综上HTML程序显示：

 1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 html xmlns="http://www.w3.org/1999/xhtml">
 3 head>
 4 meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 title>无标题文档title>
 6 head>
 7 
 8 body background="22.jpg">
 9 form>
10 账号：input type="text" value="12345" disabled="disabled" />br />br />
11 密码：input type="password" />br />br />
12 说说：textarea cols="140" rows="8">textarea>br />br />
13 请问：*成立于那一年？input type="text" />
14 input type="submit" value="提交" />
15 input type="hidden" value="1949" />
16 input type="reset" />br />
17 input type="button" value="登录" />br />
18 input type="image" src="55.jpg" />br />
19 input type="radio" name="sex" />男br />
20 input type="radio" name="sex" />女br />
21 input type="checkbox" checked="checked" />可乐br />
22 input type="checkbox" />鸡腿br />
23 input type="file" />br />br />
24 select size="1">
25 option value="11">可口可乐option>
26 option value="22">雪碧option>
27 option value="33" selected="selected">芬达option>
28 select>
29 form>
30 body>
31 html>

View Code

运行结果显示：
HTML基础（二）表单，图片热点，网页划区和拼接

实例分析：做邮箱界面程序显示

 1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 html xmlns="http://www.w3.org/1999/xhtml">
 3 head>
 4 meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 title>无标题文档title>
 6 head>
 7 
 8 body background="11.jpg">
 9 font face="华文隶书">
10 table align="center" width="600" height="600" border="1" cellpadding="0" cellspacing="0">
11 tr>
12 td width="150">   邮箱：td>
13 td>form>input type="text" />form>td>
14 tr>
15 tr>
16 td>td>
17 td valign="middle">font color="#999999">需要通过邮箱激活账户，不支持sohu，21cn，sogou的邮箱font>td>
18 
19 tr>
20 tr>
21 td>   登录用户名：td>
22 td>form>input type="text" />form>td>
23 tr>
24 tr>
25 td>td>
26 td valign="middle">font color="#999999">仅在登录时使用，字符数不少于4个font>td>
27 tr>
28 tr>
29 td>   显示名称：td>
30 td>form>input type="text" />form>td>
31 tr>
32 tr>
33 td>td>
34 td>font color="#999999">即昵称，字符数不少于2个font>td>
35 tr>
36 tr>
37 td>   密码：td>
38 td>form>input type="password" />form>td>
39 tr>
40 tr>
41 td>   确认密码：td>
42 td>form>input type="password" />form>td>
43 tr>
44 tr>
45 td>td>
46 td>font color="#999999">至少8位，必须包含字母、数字、特殊字符font>td>
47 tr>
48 tr>
49 td>   性别：td>
50 td>form>select size="1">
51 option value="1" selected="selected">男option>
52 option value="2">女option>
53 select>form>
54 td>
55 tr>
56 tr>
57 td>   喜好：td>
58 td>form>select size="1">
59 option value="1">打游戏option>
60 option value="2">打篮球option>
61 option value="3">看电影option>
62 option value="4" selected="selected">听音乐option>
63 option value="5">旅游option>
64 select>form>
65 td>
66 tr>
67 tr>
68 td>td>
69 td>form>input type="submit" value="注册" />form>td>
70 tr>
71 
72 table> 
73 font>
74 body>
75 html>

View Code

运行结果显示：

HTML基础（二）表单，图片热点，网页划区和拼接

二、图片热点

规划出图片上的一个区域，可以做出超链接，直接点击图片区域就可以完成跳转的效果。

示例：

 1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 html xmlns="http://www.w3.org/1999/xhtml">
 3 head>
 4 meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 title>无标题文档title>
 6 head>
 7 
 8 body>
 9 img src="a006.jpg" usemap="ditu" />
10 map name="ditu">
11 area shape="rect" coords="0,0,50,50" href="http://www.baidu.com" />
12 area shape="circle" coords="265,118,80" href="http://qq.com" />
13 map>
14 body>
15 html>