HTML Form表单元素全面了解

浅沫记忆

如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
     
  <html xmlns="https://www.w3.org/1999/xhtml">   
  <head>   
    <title>注册表单</title>   
  </head>   
  <body>   
    <form action="DoFormAction.htm">   
      <fieldset style="width=800px">                                <!--套住注册表格的边框-->   
      <legend>请输入如下的信息然后进行注册</legend>   
      <table cellspacing="0px" cellpadding="6px" border="1px" bordercolor="black" align="center" width="600px">   
        <tr>   
          <td align="right">用户名:</td>                   <!--文本框-->   
          <td><input type="text" size="20" style="width:150px" /></td>   
        </tr>   
        <tr>   
          <td align="right">密码:</td>                   <!--密码框-->   
          <td><input type="password" size="20" style="width:150px" /></td>   
        </tr>   
        <tr>   
          <td align="right">确认密码:</td>   
          <td><input type="password" size="20" style="width:150px" /></td>   
        </tr>   
        <tr>   
          <td align="right">性别:</td>                    <!--单选框-->   
          <td>   
            <input type="radio" checked="checked" name="sex1" value="男" />男   
            <input type="radio" name="sex1" value="女" />女  
          </td>   
        </tr>   
        <tr>   
          <td align="right">性别(可以点文字选择):</td>   
          <td>   
            <fieldset style="width:150px">                <!--表单外框，也可以通过css设置宽度-->   
            <legend>请选择性别</legend>   
              <input type="radio" checked="checked" name="sex2" value="男" id="man" />   
              <label for="man">男</label>   
              <input type="radio" name="sex2" value="女" id="woman" />   
              <label for="woman">女</label>   
            </fieldset>   
          </td>   
        </tr>   
        <tr>   
          <td align="right">城市:</td>                  <!--下拉框-->   
          <td>   
            <select name="city">   
              <option value="北京">北京</option>   
              <option value="深圳">深圳</option>   
              <option value="上海">上海</option>   
              <option value="南昌" selected="selected">南昌</option>  <!--默认选择南昌-->   
            </select>   
          </td>   
        </tr>   
        <tr>   
          <td align="right">城市所在区域:</td>   
          <td>   
            <select name="area">       
              <optgroup label="北京">                <!--下拉框分组显示-->   
                <option value="朝阳区">朝阳区</option>   
                <option value="海淀区">海淀区</option>   
                <option value="其他区">其他区</option>   
              </optgroup>   
              <optgroup label="南昌">   
                <option value="东湖区">东湖区</option>   
                <option value="西湖区">西湖区</option>   
                <option value="青山湖区">青山湖区</option>                
              </optgroup>   
            </select>   
          </td>   
        </tr>   
        <tr>   
          <td align="right">交友目标:</td>   
          <td>   
            <select name="target" size="3" multiple="multiple">    <!--列表框-->      
              <option value="同行" selected="selected">同行</option>   
              <option value="普通朋友">普通朋友</option>   
              <option value="爱人">爱人</option>   
            </select>   
          </td>   
        </tr>   
        <tr>   
          <td align="right">爱好:</td>   
          <td>   
                                        <!--复选框,注意name属性设置一样，分组-->     
            <input type="checkbox" name="love" value="足球" />足球  
            <input type="checkbox" name="love" value="蓝球" />蓝球  
            <input type="checkbox" name="love" value="乒乓球" />乒乓球  
          </td>   
        </tr>   
        <tr>   
          <td align="right">照片上传:</td>   
          <td>   
                                        <!--文件选择框-->     
            <input type="file" name="myPic" />   
          </td>   
        </tr>   
        <tr>   
          <td align="right">自我介绍:</td>   
          <td>   
                                        <!--多行文本框-->     
            <textarea rows="5" cols="50">   
            </textarea>   
          </td>   
        </tr>   
        <tr>   
          <td align="center" colspan="2">   
            <input type="submit" value="确定" />   
            <input type="reset" value="清空" />            
            <input type="image" src="../images/btnreg.png"  />    <!--演示图片按钮(会提交数据，类似submit)   
                                                    -->   
          </td>   
        </tr>   
      </table>   
      </fieldset>   
    </form>   
  </body>   
  </html>

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

[Html/CSS] HTML Form表单元素全面了解

相关帖子

HTML/JS/PHP网站底部获取当前年份代码

html+Js获取当前时间代码

nginx启ssi方法，宝塔面板nginx开启ssi

常用的css伪类a标签

常用HTML网页跳转的几种方法

CSS3荧光灯文字闪烁动画特效

利用html+js触发弹窗事件

利用HTML、CSS和JS制作随机密码生成器

css3怎样设置子元素居中的方法

node Express学习之聊聊中间件

浅沫记忆 LV3