如何使用HTML创建表格和表单
效果图
表格
定义表格
表格是用<table>元素来定义的如: <table border=n align="alignment" bgcolor="clr">....</table>
属性border用于定义表格边框的宽度,n可以是从0开始的整数,设置border=0和忽略border属性,浏览器不会显示边框。
属性align用于设置表格个的对齐方式,alignment可以是left、center、或right。
属性bgcolor用于指定表格的背景色,采用英文red等等或者是十六进制表示。
<caption>元素用于定义表格的标题,如: <caption>...</caption>
<td>元素用于定义单元格 <td>...</td>
表单
表单的创建
使用<form>元素,以及在其中嵌入相关的元素(控件)就可以创建HTML文档中表单 表单的基本语法 <form method="get of post" action="URL"> ... </form>
属性methed用于指定向服务器发送表单数据时所使用的的HTTP方法,可以是get或者post这两种方法中的一种
get是缺省的方法,当采用get方法提交表单时,提交的数据被附加到URL的末端,作为URL的一部分发送到服务器端。
post方法是将表单中的信息作为一个数据块发送到服务器端。无论采用哪一种方法,数据的编码都是相同的,格式为name1=value1&name2=value2.
属性action制定对表单进行处理的脚本地址。也就是说,表单提交到服务器后,交个谁来处理,在action属性中制定处理者的URL。
input元素
<input>元素用于接受用户输入的信息 语法: <input type="type" name="name" size="size" value="value">
属性type用于指定要创建的控件的类型。属性name用于指定控件的名称,处理表单的服务器脚本可以获得以名称-值对应表示的表单数据,利用名称可以取出对应的值。name属性在表单中并不显示。属性size用于指定表单中控件的初始宽度。属性value用于指定控件的初始值。
单行文本输入控件(type="text") 提交按钮 type="submit" 重置按钮 type="reset" 口令输入控件 type="password" 单选按钮 type="radio" 复选康 type="checkbox" 隐藏控件 type="hidden" 单选按钮的name值如果是一致的则这是一组单选按钮 input默认的类型是text类型
列表框
列表框允许用户从一个下拉列表框中选择一项或者多项,功能和单选按钮和复选按钮相同,但显示的方式不一样。
列表框由<select>元素创建,列表框中的各个选项用<option>元素提供 如: <select size="1" name="eduction"> <option value="" selected>....</option> <option value="高中">高中</option> <option value="大学">大学</option> <option value="博士">博士</option> </select><br>
多行文本输入控件
语法: <textarea name="name" rows="number of rows" cols="number of columns">...</textarea>
属性rows用于指定文本输入的文本行数,属性cols用于指定文本输入控件可视区域的宽度。在开始标签和结束标签之前出现的问本,将作为文本输入控件中的初始文本
实例
效果图
实例代码
<html> <head><title>表单的例子</title></head> <body> <form method="get" action="reg.jsp"> 用户名:<input type="text" name="user" size="20" ><br> 密码:   <input type="password” name="pwd"><br> 性别:<input type="radio" name="sex" value="1" checked>男 <input type="radio" name="sex" value="0">女<br> 兴趣爱好: <input type="checkbox" name="interest" value="football">足球 <input type="checkbox" name="interest" value="baskeball">蓝球 <input type="checkbox" name="interest" value="volleyball">排球 <input type="checkBox" name="interest" value="swim">游泳<br> 最高学历: <select size="1" name="eduction"> <option value="" selected>....</option> <option value="高中">高中</option> <option value="大学">大学</option> <option value="博士">博士</option> </select><br> 个人简介:<textarea name="personal" rows="5" cols="30">个人简介</textarea><br> <input type="hidden" name="id"> <input type="reset" value="重写"> <input type="submit" value="提交"> </form> </body> </html>