Home > Article > Web Front-end > 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
- 高洛峰Original
- 2017-02-17 15:57:231500browse
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>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>
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>
设计界面：矩形和圆形的地方在运行时，鼠标放上会变成小手状，表示有链接。
三、网页划区和拼接
划区：在一个网页里，规划出一个区域用来展示另一个网页的内容。
示例：
拼接：在一个网络页面内，规划出多个页面窗口，以表格拼接的形式展示出来。（可以想象一下监控画面，多个画面同时显示）
示例：
以上这篇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中文网！