今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>0606表格表单</title>
</head>
<body>
<from>
<table border="1" cellspacing="1" cellpadding="1" align="center" background="../../动态壁纸/壁纸2/preview.jpg">
<caption>
用户注册
</caption>
<tr>
<td width="100" align="right">
用户名:
</td>
<td width="150">
<input type="text" name="uname" value="请输入用户名" />
</td>
</tr>
<tr>
<td align="right">
照片:
</td>
<td>
<input type="file" name="file" />
</td>
</tr>
<tr>
<td width="100" align="right">
密码:
</td>
<td width="150">
<input type="password" name="pwd" value="" />
</td>
</tr>
<tr>
<td width="100" align="right">
确认密码:
</td>
<td width="150">
<input type="password" name="pwd" value="" />
</td>
</tr>
<tr>
<td width="100" align="right">
性别:
</td>
<td width="150">
<input type="radio" name="sex" id="s1" value="nan"/>
<label for="s1">男</label>
<input type="radio" name="sex" id="s2" value="nv"/>
<label for="s2">女</label>
<input type="radio" name="sex" id="s0" value="baomi"/>
<label for="s0">保密</label>
</td>
</tr>
<tr>
<td width="100" align="right">
专业:
</td>
<td width="150">
<input type="checkbox" id="a1" name="ck[]"/>
<label for="a1">Java</label>
<input type="checkbox" id="a0"name="ck[]"/>
<label for="a0">.net</label>
<input type="checkbox" id="a3"name="ck[]"/>
<label for="a3">PHP</label>
</td>
</tr>
<tr>
<td width="100" align="right">
出生年份:
</td>
<td width="150">
<select name="year">
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
</select>
</td>
</tr>
<tr>
<td width="100" align="right">
自我介绍:
</td>
<td width="150">
<textarea rows="4" cols="12" ></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name=" " value="提交" />
<input type="image" /*提交按钮*/ src="../../动态壁纸/壁纸1/最终幻想13雷霆归来 隐藏CG/preview.jpg" width="40" />
<input type="button" name="" value="是的" />
<input type="reset" name="" value="重置" />
</td>
</tr>
</table>
</from>
</body>
</html>
<form>
表单元素最外层。
<form> 标签用于为用户输入创建 HTML 表单。和用户交互,返回数据给服务器。
<form>中可以写在<body>的首尾,中间可以嵌套表格等
<form>属性:
action:提交给谁
method:提交方式,主要有get和post两种
get:提交的内容会以name=value的键值对的方式,name是键,value是值,在网址后?后显示在地址栏,用&隔开。这种方式不安全,而且有长度限制
post:隐式提交,安全,而且长度没有限制
target:规定在哪里打开页面,主要有:
_blank在新的选项卡打开
_self在自身选项卡打开
enctype:规定在发送表单数据之前如何对其进行编码。如果要提交文件,使用该属性
表单内的元素有十二个,分为三类:
基本为<input type=* name=** value=**>
1、文本输入类
文本框:
<input type="text" name="uname" value="请输入用户名" />
可用于输入用户名,其中value是默认显示的值,用户输入后值为用户输入的内容
密码框:
<input type="password" name="pwd" value="" />
用于输入密码,页面显示为……,作为密码框,在用户注册界面不必有值,但是在用户保存密码后的登录界面,会显示用户保存的密码,当然,用户看到的是……
隐藏域:
<input type="hidden" name=“”value=“”/>
这个在网页中不会显示,可用于存放一些重要不需要用户看到的信息,比如某些员工号
文本域:
<textarea rows="4" cols="12"></textarea>
文本域比较特殊,使用的标签是<textarea ></textarea>,不再是input,可以通过rows调整行高,用cols调整一行能输入几个字符
<textarea>标签没有name和value属性
2、按钮类
按钮类显示的名字用value控制
普通按钮
<input type="button" name="" value="是的" />
提交按钮
<input type="submit" name=" " value="提交" />
点击提交值给action
重置按钮
<input type="reset" name="" value="重置" />
点击清空清空用户输入的内容并变为默认值
图片按钮
<input type="image" /*提交按钮*/ src="../../动态壁纸/壁纸1/最终幻想13雷霆归来 隐藏CG/preview.jpg" width="40" />
点击的效果等同于提交按钮,可以通过width,height等属性来调整图片大小
3、选择输入类
下拉列表
<select name="year">
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
</select>
下拉列表由<select>和<option>来构成。下拉列表的name属性加在<select>中,value在<option>中。因为选择不同的项目提交的值也不一样。
单选
<input type="radio" name="sex" id="s1" value="nan"/>
<label for="s1">男</label>
<input type="radio" name="sex" id="s2" value="nv"/>
<label for="s2">女</label>
<input type="radio" name="sex" id="s0" value="baomi"/>
<label for="s0">保密</label>
单项选择type=“radio”,name需要相同。
选择只有点击到原点或者方块才会选中,相对不便,可以使用<label>来使点击文字就可以选中
<label> 标签的 for 属性应当与<input>中的 id 属性相同。id唯一。
单项选择的多项选择都有可以和<label>标签来结合。
复选框
<input type="checkbox" id="a1" name="ck[]"/>
<label for="a1">Java</label>
<input type="checkbox" id="a0"name="ck[]"/>
<label for="a0">.net</label>
<input type="checkbox" id="a3"name="ck[]"/>
<label for="a3">PHP</label>
同一组的复选框name一般用c[]数组的方式来提交。
选择文件
<input type="file" name="file" />
选择文件提交的是文件,所以value不是必须的。
需要注意的是:
name和value刚开始容易弄混,在提交的时候,name=value,在按钮类中value是显示,name不是必须的
但是在输入类和选择类中,都应有name和value,用于提交数据,在特殊情况,比如新用户注册,value可以没有默认值
另外,如果提交的不是字符,比如<input type="file" name="file" />中value不是必须的。
但是,对于初学者最好都写上name和value,可以值为空。