关闭

HTML学习5:常用标签之表单标签

226人阅读 评论(0) 收藏 举报
分类:

 HTML 表单用于搜集不同类型的用户输入。

       表单标签列表:


       一表单标签<form>

       表单是一个包含表单元素的区域。表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等

等)输入信息的元素。表单使用表单标签(<form>)定义。

       二表单输入标签<input>

       多数情况下被用到的表单标签是输入标签(<input>)。输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下:

       (1)文本域(Text Fields)和密码域(Password Field)

       当用户要在表单中键入字母、数字等内容时,就会用到文本域和密码域。

  1. <span style="font-size:18px;"><html>  
  2.       <head>  
  3.       <title>HTML表单标签演示</title>  
  4.       </head>  
  5.       <body>  
  6.             <form>  
  7.             登录名称:<input type="text" name="user" /><br />  
  8.             登录密码:<input type="password" name="password" />  
  9.             </form>  
  10.             <p>请注意,当您在密码域中键入字符时,浏览器将使用项目符号来代替这些字  
  11.   
  12. 符。</p>  
  13.       </body>  
  14. </html>  
  15. </span>  
       浏览器显示的结果为:


       (2)单选按钮(Radio Buttons)

       当用户从若干给定的的选择中选取其一时,就会用到单选框。注意,只能从中选取其一。也可以用属性

checked="checked"将性别选择为默认状态。

  1. <span style="font-size:18px;"><html>  
  2.       <head>  
  3.       <title>HTML表单标签演示</title>  
  4.       </head>  
  5.       <body>  
  6.             <form>  
  7.             选择性别第一种情况:<input type="radio" name="sex" value="man" />男      
  8.   
  9.                                 <input type="radio" name="sex" value="woman" />女    
  10.   
  11.             <hr/>  
  12.             选择性别第二种情况:<input type="radio" name="sex" value="man" />男      
  13.   
  14.                                 <input type="radio" name="sex" value="woman"   
  15.   
  16. checked="checked" />女   
  17.             </form>  
  18.             <p>第一种情况最为常见,但是也会遇到第二种情况,就是当注册的为女性网站  
  19.   
  20. 时,性别选项会默认选择性别女。</p>  
  21.       </body>  
  22. </html></span>  
       浏览器显示的结果为:


       (3)复选框(Checkboxes)

       当用户需要从若干给定的选择中选取一个或若干选项时,就会用到复选框。也可以用属性checked="checked"将

性别选择为默认状态。

  1. <span style="font-size:18px;"><html>  
  2.       <head>  
  3.       <title>HTML表单标签演示</title>  
  4.       </head>  
  5.       <body>  
  6.             <form>  
  7.             选择技术:<input type="checkbox" name="technology" value="JAVA" />JAVA  
  8.               <input type="checkbox" name="technology" value="HTML" />HTML  
  9.               <input type="checkbox" name="technology" value="CSS" />CSS   
  10.             </form>  
  11.       </body>  
  12. </html></span>  
         浏览器显示的结果为:


         (4)输入标签中的其他输入类型

         1文件选择框(file)

         当用户需要从给定的文件夹中选取一个或若干个文件时,就会用到文件选择框。

         2表单隐藏组件(hidden)

         当用户数据不需要客户端知道,但是可以将其提交给服务端。

         3图片

         这个图片组件可以有提交数据的功能。

         4按钮

         这个按钮组件可以自定义点击事件。

  1. <span style="font-size:18px;"><html>  
  2.       <head>  
  3.       <title>HTML表单标签演示</title>  
  4.       </head>  
  5.       <body>  
  6.             <form>  
  7.             选择文件:<input type="file" name="file" /><br/>   
  8.         <!--这个图片组件可以有提交数据的功能-->  
  9.         一个图片:<input name="hh" type="image" src="22.jpg" height="48"   
  10.   
  11. width="72" align="middle"/><br/>     
  12.         <!--数据不需要客户端知道,但是可以将其提交给服务端-->  
  13.         隐藏组件:<input type="hidden" name="hidden" value="myvalue" /><br/>   
  14.         一个按钮:<input type="button" value="点击按钮" onclick="alert('我是由  
  15.   
  16. 点击按钮动作弹出的')" /><br/>   
  17.             </form>  
  18.       </body>  
  19. </html></span>  

         浏览器显示的结果为:

         点击选择文件:


         点击按钮:


         点击图片:


         三<form>表单标签的<select>标签和<textarea>标签

         (1)<select>标签

         当在网页中出现下拉列表时,需要用到的是<select>标签

         (2)<textarea>标签

         当用户在网页键入个人信息或留言等等需要输入一些文本信息时,需要用到<textarea>标签

  1. <span style="font-size:18px;"><html>  
  2.       <head>  
  3.       <title>HTML表单标签演示</title>  
  4.       </head>  
  5.       <body>  
  6.             <form>  
  7.             <h2>form表单标签的select标签</h2>  
  8.             选择国家:<select name="country">  
  9.                      <option value="none">--选择国家--</option>  
  10.                      <option value="China" selected="selected">中国  
  11.   
  12. </option>  
  13.                      <option value="USA">美国</option>  
  14.                      <option value="UK">英国</option>  
  15.               </select>  
  16.          <h2>form表单标签的textarea标签</h2>     
  17.          键入内容:<textarea name="text">  
  18.                    </textarea><br/>        
  19.             </form>  
  20.       </body>  
  21. </html></span>  
         浏览器显示的结果为:


         四<form>表单标签的<fieldset>标签和<legend>标签

         <fieldset>标签定义网页中的一个域和<legend>标签定义这个域的标题。

  1. <span style="font-size:18px;"><html>  
  2.       <head>  
  3.       <title>HTML表单标签演示</title>  
  4.       </head>  
  5.       <body>  
  6.             <form>  
  7.             <fieldset>  
  8.                  <legend>健康信息</legend>  
  9.                    身高:<input type="text" />  
  10.                    体重:<input type="text" />  
  11.             </fieldset>      
  12.             </form>  
  13.       </body>  
  14. </html></span>  
         浏览器显示的结果为:


         五输入标签<input>还有两个最重要的属性,就是:

         <input type="reset" value="重置数据" />(用于清除用户所填写的数据信息)

<input type="submit" value="提交数据" />(用于客户端向服务器端提交数据的按钮动作,与上述的图片功能相似)

         六表单标签使用整体的代码为:

  1. <span style="font-size:18px;"><!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=gb2312" />  
  5. <title>HTML表单标签演示</title>  
  6. </head>  
  7.   
  8. <body>   
  9.        <form> <!--如果要给服务端提交数据,表单中的组件一定要有name属性和value属性,  
  10.               用于给服务端获取数据方便-->  
  11.                <h2>form表单标签的input标签的十个组件</h2>  
  12.               输入名称:<input type="text" name="user" value="" /><br/>  
  13.               <!-- 密码的输入时需要隐藏其输入的字符串-->  
  14.               输入密码:<input type="password" name="psw" /><br/>  
  15.               <!-- 性别的选择需要放置在同一组内,两者只能选择其一-->  
  16.               选择性别第一种情况:<input type="radio" name="sex" value="man" />男 <input type="radio" name="sex" value="woman" />女 <br/>  
  17.               <!--如果一个网站的注册用户为同一性别,可以使用其属性checked,性别选择为默认(这一次默认选择女)-->  
  18.               选择性别第二种情况:<input type="radio" name="sex" value="man" />男 <input type="radio" name="sex" value="woman" checked="checked" />女 <br/>  
  19.               <!--如果选择多项的内容,需要用到复选框,可以选择多项内容-->  
  20.               选择技术:<input type="checkbox" name="technology" value="JAVA" />JAVA  
  21.                         <input type="checkbox" name="technology" value="HTML" />HTML  
  22.                         <input type="checkbox" name="technology" value="CSS" />CSS <br/>  
  23.               选择文件:<input type="file" name="file" /><br/>     
  24.               <!--这个图片组件可以有提交数据的功能-->  
  25.               一个图片:<input name="hh" type="image" src="22.jpg" height="48" width="72" align="middle"/><br/>    
  26.               <!--数据不需要客户端知道,但是可以将其提交给服务端-->  
  27.               隐藏组件:<input type="hidden" name="hidden" value="myvalue" /><br/>     
  28.               一个按钮:<input type="button" value="点击按钮" onclick="alert('我是由点击按钮动作弹出的')" /><br/>  
  29.                 
  30.               <h2>form表单标签的select标签</h2>  
  31.               选择国家:<select name="country">  
  32.                                 <option value="none">--选择国家--</option>  
  33.                                 <option value="China" selected="selected">中国</option>  
  34.                                 <option value="USA">美国</option>  
  35.                                 <option value="UK">英国</option>  
  36.                        </select><br/>  
  37.               <h2>form表单标签的textarea标签</h2>    
  38.               所写内容:<textarea name="text">  
  39.                         </textarea><br/>                      
  40.                         <input type="reset" value="重置数据" />  
  41.                                 
  42.                         <input type="submit" value="提交数据" />  
  43.        </form>  
  44. </body>  
  45. </html></span>  
         浏览器显示的结果为:



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:18544次
    • 积分:462
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:27篇
    • 译文:2篇
    • 评论:6条
    最新评论