首页前端开发HTMLHTML基础必看---表单,图片热点,网页划区和拼接详解

HTML基础必看---表单,图片热点,网页划区和拼接详解

时间2024-01-27 14:08:02发布访客分类HTML浏览366
导读：收集整理的这篇文章主要介绍了HTML基础必看---表单,图片热点,网页划区和拼接详解，觉得挺不错的，现在分享给大家，也给大家做个参考。 一、表单<form id="" name="" method="post/get" ac...
收集整理的这篇文章主要介绍了HTML基础必看---表单,图片热点,网页划区和拼接详解，觉得挺不错的，现在分享给大家，也给大家做个参考。

一、表单

form id="" name="" method="post/get" action="负责处理的服务端"> id不可重复；name可重复；get提交有长度限制，并且编码后的内容在地址栏可见，post提交无长度限制，且编码后内容不可见。

/form>

1、文本输入

    文本框input tyPE="txt" name="" id="" value="" />

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

    密码框input type="password" name="" id="" value="" />

    文本域textarea name="" id="" cols=""（字符多少） rows=""（几行高）> /textarea>

    隐藏域input type="hidden" name="" id="" value="" />

2、按钮

    提交按钮input type="submIT" name="" id="" disabled="disabled" value=""/> 点击后转到form内的提交服务器的地址

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

    重置按钮input type="reset" name="" id="" disabled="disabled" value=""/>

    普通按钮input type="button" name="" id="" disabled="disabled" value=""/>

    图片按钮input type="image" name="" id="" disabled="disabled" src="图片地址"/>

附：

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

3、选择输入

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

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

   复选框组input type="checkbox" name="" checked="checked" value=""/>

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

    文件上传input type="file" name="" id="" />

   label for=""> /label>

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

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

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

下拉列表框

    select  name="" id="" size="" multiple="multiple">    --size=1时，为菜单；> 1时，为列表。multiple为多选。

             option value="值"> 内容1/option>

             option value="值" selected="selected"> 内容2/option>    --selected，设为默认

             option value="值"> 内容3/option>

    /select>

综上HTML程序显示：

XML/HTML Code复制内容到剪贴板@H_998_126@
  • !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>   

    • 运行结果显示：

     

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

    XML/HTML Code复制内容到剪贴板
    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>   

    运行结果显示：

    二、图片热点

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

    示例：

    XML/HTML Code复制内容到剪贴板
    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>   

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

    三、网页划区和拼接

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

    示例：

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

    示例：

    以上这篇HTML基础必看---表单,图片热点,网页划区和拼接详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

    原文地址：http://www.cnblogs.com/H2921306656/Archive/2016/07/09/5656699.html

    声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

    HTML图片热点表单

    若转载请注明出处： HTML基础必看---表单,图片热点,网页划区和拼接详解
    本文地址： https://pptw.com/jishu/588300.html
    HTML的meta标签常见用法集锦 HTML的a标签href属性指定相对路径与绝对路径的用法讲解

    游客 回复需填写必要信息
    ↑