HTML表单_动力节点Java学院整理

时间：2017-06-23

在<input type=“text”>前可以写普通的文本来修饰，但是单击修饰文本的时候input并不会得到焦点，而用label则可以，for属性指定要修饰的控件的id，<label for=“txt1” >内容</label>；”,然后按下alt+u(了解)。accesskey=“u“，label的另一个属性。注意：要为被修饰的控件设置一个唯一的id。我觉得<label></label>标签对<input type="radio"/>和<input type="checkbox"/>这两个标签是非常有用的。

   <input type="radio" name="sex" id="male" value="0" checked="checked" /><label for="male">男</lable>
   <input type="radio" name="sex" id="fmale" value="1" /><label for="fmale">女</label>
   <input type="radio" name="sex" id="secret" value="2" /><label for="secret">保密</label>

10.<fieldset></fieldset>标签

fieldset标签将控件划分一个区域，看起来更规整。

 <fieldset>
    <legend>爱好</legend>
     <input type="checkbox" value="篮球" />
     <input type="checkbox" value="爬山" />
     <input type="checkbox" value="阅读" />
 </fieldset>

11.提交按钮<input type="submit"/>

当用户单击<inputt type="submit"/>的提交按钮时，表单数据会提交给<form>标签的action属性所指定的服务器处理程序。中文IE下默认按钮文本为“提交查询”，可以设置value属性修改按钮的显示文本。　

<input type="submit" value="提交"/>

12.重置按钮<input type="reset"/>

当用户单击<input type="reset"/>按钮时，表单中的值被重置为初始值。在用户提交表单时，重置按钮的name和value不会提交给服务器。

<input type=“reset” value=“重置按钮"/>

13.普通按钮<input type="button"/>

普通按钮通常用于单击执行一段脚本代码。

<input type="button" value="普通按钮"/>

14.图像按钮<input type="image"/>

图像按钮的src属性指定图像源文件，它没有value属性。图像按钮可代替<input type="submit"/>，而现在也可以通过css直接将<input type="submit"/>按钮的外观设置为一幅图片。

  <input type="image" src="bg.jpg" />

三、表单示例

该示例是使用表单实现的一个简单的注册页面，使用表格布局。

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 01 Transitional//EN" "http://wwwworg/TR/html4/loosedtd">
   <html>
   <head>
       <title>注册页面</title>
       <style type="text/css">
         table
        {
             width: 450px;
             border: 1px solid red;
              background-color: #FFCB29;
              border-collapse: collapse;
          }
          td
         {
             width: 200;
             height: 40px;
             border: 1px solid black;
          }
          span
          {
              background-color: red;
          }
      </style>
  </head>
  <body style="background-color: blue; background-image: url(/image/bearjpg); background-repeat: repeat;">
      <form name="registerform" id="form1" action="" method="post">
      <table align="center" cellspacing="0" cellpadding="0">
          <tr>
              <td>
                  用户名：
              </td>
              <td>
                  <input type="text" />
              </td>
          </tr>
          <tr>
              <td>
                  密码：
              </td>
              <td>
                  <input type="password" />
              </td>
          </tr>
          <tr>
              <td>
                  确认密码：
              </td>
              <td>
                  <input type="password" />
              </td>
          </tr>
          <tr>
              <td>
                  请选择市：
              </td>
              <td>
                  <select>
                      <optgroup label="中国">
                          <option>甘肃省</option>
                          <option>河南省</option>
                          <option>上海市</option>
                      </optgroup>
                      <optgroup label="American">
                          <option>California</option>
                          <option>Chicago</option>
                          <option>New York</option>
                      </optgroup>
                  </select>
              </td>
          </tr>
          <tr>
             <td>
                 请选择性别：
            </td>
            <td>
                 <input type="radio" name="sex" id="male" value="0" checked="checked" /><label for="male">男</lable>
                     <input type="radio" name="sex" id="fmale" value="1" /><label for="fmale">女</label>
                     <input type="radio" name="sex" id="secret" value="2" /><label for="secret">保密</label>
              </td>
          </tr>
          <tr>
              <td>
                  请选择职业：
              </td>
              <td>
                  <input type="radio" id="student" name="profession" /><label for="student">学生</label>
                  <input type="radio" id="teacher" name="profession" /><label for="teacher">教师</label>
                  <input type="radio" id="others" name="profession" /><label for="others">其他</label>
              </td>
          </tr>
          <tr>
              <td>
                  请选择爱好：
              </td>
              <td>
                  <fieldset>
                      <legend>你的爱好</legend>
                      <input type="checkbox" name="hobby" id="basketboll" checked="checked" /><label for="basketboll">打篮球</label>
                      <input type="checkbox" name="hobby" id="run" /><label for="run">跑步</label>
                     <input type="checkbox" name="hobby" id="read" /><label for="read">阅读</label>
                     <input type="checkbox" name="hobby" id="surfing" /><label for="surfing">上网</label>
                 </fieldset>
             </td>
         </tr>
         <tr>
             <td>
                 备注：
             </td>
             <td>
                 <textarea cols="30">这里是备注内容</textarea>
             </td>
         </tr>
         <tr>
             <td>
                 &nbsp;
             </td>
             <td>
                 <input type="submit" value="提交" />
                 <input type="reset" value="重置" />
             </td>
         </tr>
     </table>
     </form>
 </body>
 </html>

共3页:

3/3下一篇

上一篇：HTML表单提交的几种方式_动力节点Java学院整理 下一篇：HTML大于号、小于号、空格、引号等常用的转义代码写法一览表

HTML表单_动力节点Java学院整理

相关文章

最新文章