zoukankan      html  css  js  c++  java

  • Html--表单练习

       
      <!--文档定义一定要带上，因为浏览器在解析的时候先按照文档定义的格式解析，
      如果没有就按照浏览器默认的格式解析，可能会出问题。-->
      <html>
      <head>  <!--标签头-->
      <title>b标签练习1</title> <!--标题-->
      </head>
      <body> <!--标签体-->
       
       
       
      <!--Test1-->
          <ol><!--有序标签-->
                  <li>爱</li>
                  <li>青苹果乐园</li>
                  <li>蝴蝶效应</li>
                  <li>芙蓉姐夫</li>
                  <li>水煮鱼</li>
              </ol>
      <!--Test2-->       
              <ul><!--无序标签-->
                  <li>爱</li>
                  <li>青苹果乐园</li>
                  <li>蝴蝶效应</li>
                  <li>芙蓉姐夫</li>
                  <li>水煮鱼</li>
              </ul>
       
      <!--Test3-->
          <ul type="A"><!--类型：square 1 a -->
                  <li>爱</li>
                  <li>青苹果乐园</li>
                  <li>蝴蝶效应</li>
                  <li>芙蓉姐夫</li>
                  <li>水煮鱼</li>
              </ul>
       
      <!--Test4表格-->
          <table border="1" height="200" width="450"><!--table表格标签--> <!--border最外层边框宽度--><!--height：高度 宽度-->
              <tr align=center ><!--tr行标签,align对齐方式，center居中-->
                 
                  <td><strong>姓名</strong></td> <!--td列标签-->
                 <td><strong>性别</strong></td>
                  <td><strong>工资</strong></td>
                 
              </tr>
              <tr>
                  <td>张三</td>
                  <td>男</td>
                  <td>10000</td>
              </tr>
              <tr>
                  <td>李四</td>
                  <td>男</td>
                  <td>10000</td>
                 
              </tr>
              <tr>
                  <td>王五</td>
                  <td>男</td>
                  <td>10002</td>
                 
              </tr>
                <tr>
                  <td>舒翠</td>
                  <td>女</td>
                  <td>15000</td>
              </tr>
           
          </table>
       
          <!--cellpadding(填充)：用来统一设置表格中每个单元格的填充大小；
             cellspacing(间距)：用来统一设置表格中每个单元格与单元格之间的间距-->
      <!--Test4-2表格-->
          <table border="1" cellpadding="30">
              <tr ><!--行标签--> 
                  <td>姓名</td>
                 <td>性别</td>
                  <td>工资</td>
              </tr>
              <table />
      <!--Test4-3表格-->
              <table border="1" cellspacing="30">
              <tr ><!--行标签-->
                 
                  <td>姓名</td>
                 <td>性别</td>
                  <td>工资</td>
                 
              </tr>
              <table />
       
       
      <!--Text4-4表头表尾-->
          <table border="1" >
          <thead><!--thead表头自动加粗、居中--注意改为；th-->
           <tr>
                  <th>姓名</th>
                 <th>性别</th>
                  <th>工资</th>
                 
              </tr>
          </thead>
            
              <tr>
                  <td>张三</td>
                  <td>男</td>
                  <td>10000</td>
              </tr>
              <tr>
                  <td>李四</td>
                  <td>男</td>
                  <td>10000</td>
                 
              </tr>
              <tr>
                  <td>王五</td>
                  <td>男</td>
                  <td>10002</td>
                 
              </tr>
                 <tfoot><!--thead表头自动加粗、居中--注意改为；th-->
                    <tr>
                      <th>舒翠</th>
                      <th>女</th>
                      <th>15000</th>
                  </tr>
              </tfoot>
          </table>
       
       
            <!-- 水平对齐方式：align :leftcenter ight
            垂直对齐方式：valign:topmiddleottom-->
      <!--Test5表格-->
               <table border="1" height="175" width="400">
              <caption>这是一个表格</caption><!--说明-->
                  <tr>
                      <td align=center colspan="3"><b>学生基本情况</b></td><!--rowspan合并行 colspan合并列-->
                  </tr>
                  <tr align=center>
                      <td><strong>姓名</strong></td>
                      <td><strong>性别</strong></td>
                      <td><strong>专业</strong></td>
                  </tr>
                  <tr>
                      <td>刘备</td>
                      <td>男</td>
                      <td rowspan="3">计算机</td>
                      </tr>
                  <tr>
                       <td>张飞</td>
                       <td>男</td>
                  </tr>
                  <tr>
                       <td>诸葛亮</td>
                       <td></td>
                  </tr>
       
       
               </table>
      </body>
      </html>
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
      <!--知识点1-->
          <!--<form>标签为表单标签。如果要把数据提交到服务器，则需要将<input>、
          <textarea>、<select>等表单元素放到form中
         <input>是主要的表单元素，type的可选值：submit(提交按钮)、button（普通按钮）
          checkbox（复选框）、file（文件选择框）、hidden（隐藏字段）、image（图片按钮）
          password（密码框）、radio（单选按钮）、reset（重置按钮）、text（文本框）
          <input type="file"/>-->
      <!--知识点2-->
          <!--id属性的目的主要是为了客户端，可以通过javascript语言来操作某个元素。
          所有元素都可以有id，并且每个元素的id不可以重复。
          --name属性的目的是为了将数据提交到服务器。
          只有表单元素才可以有name，并且name是可以重复的。
          表单提交其实就是提交的表单元素的value中的内容，用户输入的值自动就到value中了-->
       
         
      <html>
      <head>
      <title>表单</title>
      </head>
      <body>
              <form action="http://www.baidu.com/a.aspx" method="get"><!--action(提交)处理,get post一种提交方法-->
              <table border="1"><!--border边框粗细-->
                      <tr>
                          <td>姓名：</td>
                          <td><input name="txtName" type="text" value="王小明"/></td> <!--name可以做自由命名，type有一定类型，有点像窗体控件-->
                      </tr>
                        <tr>
                          <td>邮箱：</td>
                          <td><input name="txtEmail" type="text" value="sfjslf@qq.com"/></td>
                      </tr>
                         <tr>
                          <td>密码：</td>
                          <td><input name="txtPassword" type="password"/></td>
                      </tr>
                         <tr>
                          <td>确认密码：</td>
                          <td><input name="txtConfirmPassword" type="password"/></td>
                      </tr>
                       <tr>
                          <td>性别：</td>
                          <td><input type="radio" name="gender" value="male">男
                          <input type="radio" name="gender" value="female" />女</td>
                       </tr>
                       <tr>
                          <td>兴趣爱好：</td>
                          <td>
                          <input name="hobby" type="checkbox"  value="1"/> 篮球
                           <input name="hobby" type="checkbox"  value="2"/>跑步
                            <input name="hobby" type="checkbox"  value="3"/>看书看报
                             <input name="hobby" type="checkbox"  value="4"/>吃东西
                              <input name="hobby" type="checkbox"  value="5"/>旅游
                          </td>
                       </tr>
                       <tr>
                          <td>所在地区：</td>
                          <td>
                              省：
                              <select name="province" multiple="multiple" size="4"> <!--创建带有 4 个选项的选择列表-->
                                  <option value="1">黑龙江</option>
                                  <option value="2">吉林</option>
                                  <option value="3">武汉</option>
                                  <option value="11">襄阳</option>
                                    <option value="1">黑龙江</option>
                                  <option value="2">吉林</option>
                                  <option value="3">武汉</option>
                                  <option value="11">襄阳</option>
                              </select>
                              市：
                              <select>
                                 <optgroup label="襄阳">
                                  <option value="101">宜城</option>
                                  <option value="102">枣阳</option>
                                  <option value="103">老河口</option>
                                  <option value="104">谷城</option>
                                  <option value="105">南漳</option>
                                 <optgroup label="武汉">
                                 <option value="121"武昌区</option>
                                  <option value="122">汉阳区</option>
                                  <option value="123">汉口</option>
                                  <option value="124">江夏区(05）</option>
                                  <option value="125">洪山区(06)</option>
                                 </optgroup>
                                 
                              </select>
                          </td>
                       </tr>
       
                         <tr>
                         
                          <td colspan="2" style="heght:80px;">
                          <fieldset style="height:50px;"><!--<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。-->
                         <legend>请选择你感兴趣的内容：</legend>  <!--组合表单中的相关元素-->
                          <input name="hobby" type="checkbox"  value="1"/> 数据库
                           <input name="hobby" type="checkbox"  value="2"/>网络
                            <input name="hobby" type="checkbox"  value="3"/>web开发
                             <input name="hobby" type="checkbox"  value="4"/>移动开发
                          </fieldset>
                     
           
                          </td>
       
                  </table>
                
       
              </form>
      </body>
       
      </html>

    详细知识点：www.w3cschool 、菜鸟教程
  • 相关阅读:
    Mybatis基础配置及增删查改操作
    SpringMVC注解方式与文件上传
    SpringMVC的基础配置及视图定位
    Spring AOP面向切面编程
    Spring注入属性、对象
    Spring的配置及jar包下载
    多线程
    集合框架
    I/O————流
    I/O————对象流
  • 原文地址：https://www.cnblogs.com/hao-1234-1234/p/6188715.html
Copyright © 2011-2022 走看看