• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML Form表单元素全面了解

    如下所示：

    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.   
    3. <html xmlns="http://www.w3.org/1999/xhtml">  
    4. <head>  
    5.     <title>注册表单</title>  
    6. </head>  
    7. <body>  
    8.     <form action="DoFormAction.htm">  
    9.         <fieldset style="width=800px">                                                              <!--套住注册表格的边框-->  
    10.         <legend>请输入如下的信息然后进行注册</legend>  
    11.         <table cellspacing="0px" cellpadding="6px" border="1px" bordercolor="black" align="center" width="600px">  
    12.             <tr>  
    13.                 <td align="right">用户名:</td>                                   <!--文本框-->  
    14.                 <td><input type="text" size="20" style="width:150px" /></td>  
    15.             </tr>  
    16.             <tr>  
    17.                 <td align="right">密码:</td>                                     <!--密码框-->  
    18.                 <td><input type="password" size="20" style="width:150px" /></td>  
    19.             </tr>  
    20.             <tr>  
    21.                 <td align="right">确认密码:</td>  
    22.                 <td><input type="password" size="20" style="width:150px" /></td>  
    23.             </tr>  
    24.             <tr>  
    25.                 <td align="right">性别:</td>                                      <!--单选框-->  
    26.                 <td>  
    27.                     <input type="radio" checked="checked" name="sex1" value="男" />男    
    28.                     <input type="radio" name="sex1" value="女" />女   
    29.                 </td>  
    30.             </tr>  
    31.             <tr>  
    32.                 <td align="right">性别(可以点文字选择):</td>  
    33.                 <td>  
    34.                     <fieldset style="width:150px">                              <!--表单外框，也可以通过css设置宽度-->  
    35.                     <legend>请选择性别</legend>  
    36.                         <input type="radio" checked="checked" name="sex2" value="男" id="man" />  
    37.                         <label for="man">男</label>  
    38.                         <input type="radio" name="sex2" value="女" id="woman" />  
    39.                         <label for="woman">女</label>  
    40.                     </fieldset>  
    41.                 </td>  
    42.             </tr>  
    43.             <tr>  
    44.                 <td align="right">城市:</td>                                    <!--下拉框-->  
    45.                 <td>  
    46.                     <select name="city">  
    47.                         <option value="北京">北京</option>  
    48.                         <option value="深圳">深圳</option>  
    49.                         <option value="上海">上海</option>  
    50.                         <option value="南昌" selected="selected">南昌</option>  <!--默认选择南昌-->  
    51.                     </select>  
    52.                 </td>  
    53.             </tr>  
    54.             <tr>  
    55.                 <td align="right">城市所在区域:</td>  
    56.                 <td>  
    57.                     <select name="area">            
    58.                         <optgroup label="北京">                                <!--下拉框分组显示-->  
    59.                             <option value="朝阳区">朝阳区</option>  
    60.                             <option value="海淀区">海淀区</option>  
    61.                             <option value="其他区">其他区</option>  
    62.                         </optgroup>  
    63.                         <optgroup label="南昌">  
    64.                             <option value="东湖区">东湖区</option>  
    65.                             <option value="西湖区">西湖区</option>  
    66.                             <option value="青山湖区">青山湖区</option>                               
    67.                         </optgroup>  
    68.                     </select>  
    69.                 </td>  
    70.             </tr>  
    71.             <tr>  
    72.                 <td align="right">交友目标:</td>  
    73.                 <td>  
    74.                     <select name="target" size="3" multiple="multiple">        <!--列表框-->         
    75.                         <option value="同行" selected="selected">同行</option>  
    76.                         <option value="普通朋友">普通朋友</option>  
    77.                         <option value="爱人">爱人</option>  
    78.                     </select>  
    79.                 </td>  
    80.             </tr>  
    81.             <tr>  
    82.                 <td align="right">爱好:</td>  
    83.                 <td>  
    84.                                                                             <!--复选框,注意name属性设置一样，分组-->      
    85.                     <input type="checkbox" name="love" value="足球" />足球   
    86.                     <input type="checkbox" name="love" value="蓝球" />蓝球   
    87.                     <input type="checkbox" name="love" value="乒乓球" />乒乓球   
    88.                 </td>  
    89.             </tr>  
    90.             <tr>  
    91.                 <td align="right">照片上传:</td>  
    92.                 <td>  
    93.                                                                             <!--文件选择框-->      
    94.                     <input type="file" name="myPic" />  
    95.                 </td>  
    96.             </tr>  
    97.             <tr>  
    98.                 <td align="right">自我介绍:</td>  
    99.                 <td>  
    100.                                                                             <!--多行文本框-->      
    101.                     <textarea rows="5" cols="50">  
    102.                     </textarea>  
    103.                 </td>  
    104.             </tr>  
    105.             <tr>  
    106.                 <td align="center" colspan="2">  
    107.                     <input type="submit" value="确定" />  
    108.                     <input type="reset" value="清空" />                       
    109.                     <input type="image" src="../images/btnreg.png" onclick="alert('hello')" />      <!--演示图片按钮(会提交数据，类似submit)  
    110.                                                                                                     -->  
    111.                 </td>  
    112.             </tr>  
    113.         </table>  
    114.         </fieldset>  
    115.     </form>  
    116. </body>  
    117. </html>  

    以上就是小编为大家带来的HTML Form表单元素全面了解的全部内容了，希望对大家有所帮助，多多支持脚本之家~

    上一篇：浅谈HTML空链接的作用
    下一篇：HTML table 直列化格式详解
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯

    时间：9:00-21:00 (节假日不休)

    地址：江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    HTML Form表单元素全面了解 HTML,Form,表单,元素,全面,