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为多选。

  • 相关阅读:
    jQuery-选择器
    Html-CSS-细节处理
    JS-练习题
    将博客搬至CSDN
    Linux学习(推荐学习资源)——保持更新
    借助Git实现本地与GitHub远程双向传输(同步GitHub仓库)以及一些使用错误解决
    Linux学习使用Vim
    linux学习之Ubuntu
    在docker中创建使用MySQL,并实现远程连接navicat
    Swing系列之控件一
  • 原文地址:https://www.cnblogs.com/koker/p/5459093.html
Copyright © 2011-2022 走看看