Must-read HTML basics---forms, image hotspots, web page partitioning and splicing detailed explanations-HTML Tutorial-php.cn

Must-read HTML basics---forms, image hotspots, web page partitioning and splicing detailed explanations

高洛峰

Release： 2017-02-17 15:57:23

Original

1498 people have browsed it

1. Form

1. Text input

Text box

Note: Setting the value above means setting the default value

Password box

Text area

Hide Domain

2、Button

Submit buttonClick to go to the address of the submission server in the form

Note: The value set above represents the text displayed above during runtime .

Reset button

Normal button

Image button

Attachment:

Disabled makes the button invalid; enable makes it available.

3. Select input

Radio button group The value of name is used to group ;The value value is invisible, it is submitted to the program; checked, sets the default option.

Note: The radio button group cannot be canceled after being selected.

Checkbox group

Note: checked="checked" means one comes up It is selected, and the check box can be selected or deselected.

File upload

& lt; label & gt; label as input element definition (mark).

The label element does not present any special effects to the user. However, it improves usability for mouse users. This control is triggered if you click on the text inside the label element. That is to say, when the user selects the label, the browser will automatically turn the focus to the form control related to the label.

# & lt; label & gt; label's for property should be the same as the ID attribute of the relevant element.

Drop-down list box

-selected, set as default

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
</head>  
  
<body background="22.jpg">  
<form>  
账号：<input type="text" value="12345" disabled="disabled" /><br /><br />  
密码：<input type="password" /><br /><br />  
说说：<textarea cols="140" rows="8"></textarea><br /><br />  
请问：中华人民共和国成立于那一年？<input type="text" />  
<input type="submit" value="提交" />  
<input type="hidden" value="1949" />  
<input type="reset" /><br />  
<input type="button" value="登录" /><br />  
<input type="image" src="55.jpg" /><br />  
<input type="radio" name="sex" />男<br />  
<input type="radio" name="sex" />女<br />  
<input type="checkbox" checked="checked" />可乐<br />  
<input type="checkbox" />鸡腿<br />  
<input type="file" /><br /><br />  
<select size="1">  
<option value="11">可口可乐</option>  
<option value="22">雪碧</option>  
<option value="33" selected="selected">芬达</option>  
</select>  
</form>  
</body>  
</html>

Copy after login

The running result shows:

Example analysis: Make an email The interface program displays

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
</head>  
  
<body background="11.jpg">  
<font face="华文隶书">  
<table align="center" width="600" height="600" border="1" cellpadding="0" cellspacing="0">  
<tr>  
<td width="150">   邮箱：</td>  
<td><form><input type="text" /></form></td>  
</tr>  
<tr>  
<td></td>  
<td valign="middle"><font color="#999999">需要通过邮箱激活账户，不支持sohu，21cn，sogou的邮箱</font></td>  
  
</tr>  
<tr>  
<td>   登录用户名：</td>  
<td><form><input type="text" /></form></td>  
</tr>  
<tr>  
<td></td>  
<td valign="middle"><font color="#999999">仅在登录时使用，字符数不少于4个</font></td>  
</tr>  
<tr>  
<td>   显示名称：</td>  
<td><form><input type="text" /></form></td>  
</tr>  
<tr>  
<td></td>  
<td><font color="#999999">即昵称，字符数不少于2个</font></td>  
</tr>  
<tr>  
<td>   密码：</td>  
<td><form><input type="password" /></form></td>  
</tr>  
<tr>  
<td>   确认密码：</td>  
<td><form><input type="password" /></form></td>  
</tr>  
<tr>  
<td></td>  
<td><font color="#999999">至少8位，必须包含字母、数字、特殊字符</font></td>  
</tr>  
<tr>  
<td>   性别：</td>  
<td><form><select size="1">  
<option value="1" selected="selected">男</option>  
<option value="2">女</option>  
</select></form>  
</td>  
</tr>  
<tr>  
<td>   喜好：</td>  
<td><form><select size="1">  
<option value="1">打游戏</option>  
<option value="2">打篮球</option>  
<option value="3">看电影</option>  
<option value="4" selected="selected">听音乐</option>  
<option value="5">旅游</option>  
</select></form>  
</td>  
</tr>  
<tr>  
<td></td>  
<td><form><input type="submit" value="注册" /></form></td>  
</tr>  
  
</table>    
</font>  
</body>  
</html>

Copy after login

Must-read HTML basics---forms, image hotspots, web page partitioning and splicing detailed explanations

and the running result displays:

## 2. Picture hot spots

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

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
</head>  
  
<body>  
<img  src="a006.jpg" usemap="ditu" / alt="Must-read HTML basics---forms, image hotspots, web page partitioning and splicing detailed explanations" >  
<map name="ditu">  
<area shape="rect" coords="0,0,50,50" href="http://www.baidu.com" />  
<area shape="circle" coords="265,118,80" href="http://qq.com" />  
</map>  
</body>  
</html>

Copy after login

设计界面：矩形和圆形的地方在运行时，鼠标放上会变成小手状，表示有链接。

Must-read HTML basics---forms, image hotspots, web page partitioning and splicing detailed explanations

三、网页划区和拼接

划区：在一个网页里，规划出一个区域用来展示另一个网页的内容。

示例：

Must-read HTML basics---forms, image hotspots, web page partitioning and splicing detailed explanations

拼接：在一个网络页面内，规划出多个页面窗口，以表格拼接的形式展示出来。（可以想象一下监控画面，多个画面同时显示）

示例：

Must-read HTML basics---forms, image hotspots, web page partitioning and splicing detailed explanations

以上这篇Must-read HTML basics---forms, image hotspots, web page partitioning and splicing detailed explanations就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持PHP中文网。

更多Must-read HTML basics---forms, image hotspots, web page partitioning and splicing detailed explanations相关文章请关注PHP中文网！