Skip to content

表格与表单

table 表格:

在html中制作表格, 使用table,tr td

border 控制是否显示边框

cellspacing 控制表格table 与单元格之间的 间距

cellpadding 控制单元格与内容的间距

HTML
<table border="1" cellpadding="0" cellspacing="0" border-collapse="collapse">
			<tr>
				<td>属性	值<td>
				<td>描述<td>
			</tr>
			<tr>
				<td>align<td>
				<td>left<td>
			</tr>
			<tr>
				<td>right<td>
				<td>HTML5 不支持。HTML 4.01 已废弃。 规定表格相对周围元素的对齐方式。<td>
			</tr><tr>
				<td>colorname<td>
				<td>HTML5 不支持。HTML 4.01 已<td>
			</tr>
		</table>

通过 rowspan 跨行,colspan 跨列

html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table , th ,td{
				border-color: orange;
			}
		</style>
	</head>
	<body>
		
		
		
		<table border="1" style="border-collapse: collapse;">
		   <tr>
		      <th>名称</th>
		      <th>官网</th>
		      <th>性质</th>
		    </tr>
		    <tr>
		       <td>C语言中文网</td>
		      <td>http://c.biancheng.net/</td>
		      <td rowspan="2">教育</td>
		     </tr>
		    <tr>
		        <td>百度</td>
		      <td >http://www.baidu.com/</td>
		     <!-- <td>搜索</td> -->
		   </tr>
		   <tr>
		       <td>当当</td>
		      <td colspan="2">http://www.dangdang.com/</td>
		      <!-- <td>图书</td> -->
		   </tr>
		</table>
	</body>
</html>

form表单

用于在客户端收集用户提交的信息。使用控件接收用户的各种类型的消息。

单就是收集用户信息的,就是让用户填写的、选择的。

<div> <h3>欢迎注册本网站</h3>
    <form> 所有的表单内容,都要写在form标签里面</form>
</div>

form是英语表单的意思,form中间可以添加文本框、密码框、单选按钮、复选框、下拉列表、按钮、文本域等内容

1.文本框

<input type="text" value="默认值" />

2.密码框

<input type="password"/>

3.单选按钮

<input type="radio" name="命名" checked="checked"/>男 <input type="radio" name="命名"/>女

input的type的值如果是radio就是单选按钮。 需要注意的是必须要有相同的name属性,单选按钮才能互斥。

4.label标签

<input type=“radio” name=“sex” id=“nan” /> <label for=“nan”>男</label> <input type=“radio” name=“sex” id=“nv” /> <label for=“nv”>女</label>

input元素要有一个id,然后label标签就有一个for属性,和id相同,就表示绑定了,这个label和input就有绑定关系了。点击label标签中的文字就可以选择相应的单选框 4.复选框

<input type="checkbox" name="aihao"/> 睡觉 
<input type="checkbox" name="aihao"/> 吃饭

复选框,最好也是有相同的name(便于服务器端收集用户选中的信息)。

5.下拉列表

<select>
    <option>吃饭</option>
    <option>睡觉</option>
    <option>打豆豆</option>
</select>

select就是“选择”, select标签和ul、ol、dl一样,都是组标签 option“选项”。

6.文本域

<textarea cols="20" rows="10"></textarea>

cols属性表示columns“列”, rows属性表示rows“行”。 值就是数字,表示行数和列数。标签对儿中间的文字是默认出现在文本框的文字,一般不需要写字。

7.按钮

普通按钮

<input type="button" value="我是一个普通按钮" />

button就是英语“按钮”的意思。value的“值”就是按钮上面显示的文字。

提交按钮

<input type="submit" />

submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。这个按钮点击,表单会提交到服务器。

重置按钮

<input type="reset" />

只读和禁用

<input name="name" type="text" value="张三"  readonly="readonly">

<input type="submit "  disabled="disabled"  value="保存" >

Released under the MIT License.