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

原文地址:https://www.cnblogs.com/koker/p/5459093.html