zoukankan      html  css  js  c++  java
  • HTML-表格与表单

    1.表格

    <table><table/>表格

    width:宽

    border:边框

    cellpadding:内容与单元格边框的边距

    cellspacing:单元格间距

    bgcolor:背景色

    background

    <tr><tr/>:行

    <td><td/>:列

    colspan="n" 合并同一行单元格

    rowspan=“n”合并同一列单元格

    表单

    1,文本输入
    文本框<input type="text" name="" id="" value="" />
    密码框<input type="password" name="" id="" value="" />
    文本域<input type="text" name="" id="" value="" />
    隐藏域<input type="text" name="" id="" value="" />

    2,按钮

    提交按钮<input type="submit" disable="disable"name="" id="" value="" />
    重置按钮<input type="submit" disable="disable"name="" id="" value="" />
    普通按钮<input type="submit" disable="disable"name="" id="" value="" />
    图片按钮<input type="text" name="" id="" value="" />

    *附

    disable,使按钮失效;enable,使可用就像布尔型bool 要么true,flase,按钮要么可用要么失效
    <input type="text" name="" id="" value="" />
    <input type="text" name="" id="" value="" />
    <input type="text" name="" id="" value="" />
    <input type="text" name="" id="" value="" />

    以注册网站为例:

    <title>表单</title>
    </head>
    
    <body>
    
    <table width="100%" height="300" border="0" align="center" cellpadding="15" background="渐变色.jpg">
      <tr align="left">
        <td width="135" align="right">账户:</td>
        <td width="344"><input type="text" name="" id="" value=""/>
          *请输入正确格式</td>
      </tr>
      <tr align="left">
        <td align="right">密码:</td>
        <td><input type="password" name="" id="" value=""/></td>
      </tr>
      <tr align="left">
        <td align="right">确认密码</td>
        <td><input type="password" name="" id="" value=""/>
          *建议不使用特殊字符在8~16字符内</td>
      </tr>
      <tr align="left">
        <td align="right">邮箱</td>
        <td>  
         <input type="text" name="" id="" value=""/>
         <select size="1">
         <option>@.126.com</option>
         <option>@.139.com</option>
         <option>@.qq.com</option>
         
         </select>
         </td>
      </tr>
      <tr align="left">
        <td align="right">联系方式</td>
        <td><input type="text" name="" id="" value=""/></td>
      </tr>
      <tr align="left">
        <td align="right">问题一</td>
        <td>
        <select size="1">
        <option>问你是男女</option>
        <option>你多大</option>
        <option>结婚了么</option>
        
        
        </select>
        
        
        </td>
      </tr>
      <tr align="left">
        <td align="right">答案</td>
        <td><input type="text" name="" id="" value=""/></td>
      </tr>
      <tr align="left">
        <td align="right">问题二</td>
        <td>
        <select size="1">
        <option>你爱吃?</option>
        <option>你能吃?</option>
        <option>你能多少?</option>
        </select>
        </td>
      </tr>
      <tr align="left">
        <td align="right">答案</td>
        <td><input type="text" name="" id="" value=""/></td>
      </tr>
      <tr align="left">
        <td align="right"></td>
        <td></td>
      </tr>
        <tr align="left">
        <td width="142" align="right">性别</td>
        <td width="347"><input type="radio" name="222" checked="checked" />男      
        <input type="radio" name="222"  />女</td>
      </tr>
      <tr align="left">
        <td align="right">喜好的游戏</td>
        <td>
        <input type="checkbox" name="" value="" />英雄联盟<br />
    
        <input type="checkbox" name="" value="" />穿越火线<br />
    
        <input type="checkbox" name="" value="" />魔兽争霸<br />
    
        <input type="checkbox" name="" value="" />使命召唤
        </td>
      </tr>
        <tr align="left">
        <td align="right"> </td>
        <td align="right"> </td>
      </tr>
       <tr align="left">
        <td align="right"> </td>
        <td></td>
      </tr>
      <tr align="left">
        <td align="right"><input type="submit" name="" id=""  value="提交"/></td>
        <td>*确认之后请提交</td>
      </tr>
      <tr align="left">
        <td align="right"><input type="reset" name="" id="" value="重置"/></td>
        <td>修改信息</td>
      </tr>
    </table>
    </body>
    </html>
    

    <from id="" name="" method="posst/get" action="负责处理的服务端">

    id不可重复;name可重复; get与post的区别:get提交有长度限制,且编码的内容在地址栏可见,post长度无限制,编码后内容不可见。

    <from/>

      

    文本框<input type=“text” name=“” id=“” value=“”/> 

    密码框<input type="password" name="" id="" value=""/>

    文本域<textarea name="" id="" cols=""(字符多少) rows=""(几行高)><textarea/>

    隐藏域 <input type="hidden" name="" id="" value=""/>

    2.按钮:

    提交按钮<input type="submit" name="" id="" disabled="disabled" value="提交"/>
    重置按钮<input type="reset" name="" id="" disabled="disabled" value="重置"/>
    普通按钮<input type="button" name="" id="" disabled="disabled" value=""/>不常用
    图片按钮<input type="image" name="" id="" disabled="disabled" src="图片地址"/>
    附disabled,使按钮失效;enable,使可用(disabled出去后系统自定义为可用;类似于C#的bool布尔型)。
    3,选择输入
    单选按钮组<intput type="redio" name="" checked="checked" value=""/>
    复选框组<input type="checkbox" name="" checked="checked" value=""/>
    文件上传<input type="file" name="" id=""/>
    <lable for=""><lable/>
    <select name="" id="" size="" multiple="multiple"> size=1时,为菜单;>1时,为列表。

    下拉列表框

    <select name="" id="" multiple="multiple">--size=1时为菜单;>1时为列表。multiple为多选。

  • 相关阅读:
    POJ 1251 Jungle Roads
    1111 Online Map (30 分)
    1122 Hamiltonian Cycle (25 分)
    POJ 2560 Freckles
    1087 All Roads Lead to Rome (30 分)
    1072 Gas Station (30 分)
    1018 Public Bike Management (30 分)
    1030 Travel Plan (30 分)
    22. bootstrap组件#巨幕和旋转图标
    3. Spring配置文件
  • 原文地址:https://www.cnblogs.com/koker/p/5459093.html
Copyright © 2011-2022 走看看