1、表单
表单1
表单2
上图都是表单，官方点说
表单就是用户可以在其中提供一定的数据或信息或选项的一些html元素。表单通常有一个“提交”按钮，然后可以将这些数据据/信息/选项提供给服务器上的程序使用——数据处理。
表单的核心是数据
表单标签的构成和形式：
<form name="form1" action="将表单中数据提交给的对象（PHP文件名) method="post">"
第一个表单项
第二个表单项
……
</form>
基础表单
表单种类及属性
①单行文本框
<input type="text" name="n1"/>
| 属性 | 作用 |
|---|---|
| value | 设置其中初始文字 |
| size | 设置输入框的宽度 |
| maxlength | 设置输入框最多输入字符个数 |
| readonly | 只读（无值） |
| disable | 设置输入框无效，即数据无效 |
②密码框
<input type="password" name="n2" />
| 属性 | 作用 |
|---|---|
| value | 设置其中初始文字 |
| size | 设置输入框的宽度 |
| maxlength | 设置输入框最多输入字符个数 |
③单选项
<input type="radio" name="n3" value="某个值" />
说明：单选项通常必有value值
| 属性 | 作用 |
|---|---|
| checked | 表示该选项默认是选中的状态。（无值属性） |
| name | 一组的单选项name值必须相同 |
除了上面的属性以外还有：
| 属性 | 作用 |
|---|---|
| checked | 表示该选项默认是选中的状态。（无值属性） |
| name | 一组的单选项name值必须相同 |
④多选项
<input type="checkbox" name="n4" value="某值">
说明：单选项通常必有value值
属性和单选项相同
⑤提交按钮
<input type="submit" name="n5" value="提交文字" action="提交表单数据的文件" />
⑥图片按钮
<input type="image" name="n6" src="图片地址" />
⑦重置按钮
<input type="reset" name="n7" value="重置" />
会将表单的所有用户填写或选择数据恢复到初始状态
⑧普通按钮
<input type="button" name="n8" value="文字" />
对表单没有影响，但可以从中产生“动作”以实现其他要求
⑨文件域
<input type="file" name="n9" />
可以让客户选择本地文件，发送到服务器
⑩隐藏域
<input type="hidden" name="n10" />
说明：界面上不可见，但是作为一份“隐藏的数据”提交给服务器——编程所需。
其他类型表单
a)下拉选择：用select和option标签配合实现
<select name="n11" multiple="multiple">
<option value=”1” >文字1</option>
<option value=”2” selected=”selected” >文字2</option>
<option value=”3” >文字3</option>
……
</select>
说明：option标签上可以使用selected属性，表明该select元素的默认选中的项（默认是第一项被选中）。
select标签上可以使用multiple属性，使该select元素可以“选择多项”（即默认只能选一个）
文字不过瘾，图片来说明：
下拉选择
b)多行选择（列表选项）：
<select name=”n12” size=”4”>
<option value=”1” >文字1</option>
<option value=”2” >文字2</option>
<option value=”3” >文字3</option>
……
</select>
来！上图！
多行选择
c)多行文本框
<textarea name=”n13” rows=”行数” cols=”列数”>内容</textarea>
说明：rows设定的行数是数字，表示该多行文本框可以显示的文字行数。
cols设定的列数是数字，表示该多行文本框可以显示的一行文字中个数。
此标签没有value属性。但其实际的“值”是放在此标签中间的所有内容。
多行文本框
表单项都必须有name属性，以表明其“名字”——服务器取其中的数据就是凭此名字。
表单的全面应用：（放大招了嗷！）
<body>
<h3>用户注册</h3>
<form action="abc.php" method="post">
<table width="500" border="1" >
<tr>
<td width="100" align="right">真实姓名：</td>
<td><input type="text" name="userName" value="请输入你的真实姓名" /></td>
</tr>
<tr>
<td width="100" align="right">密码：</td>
<td><input type="password" name="userPswd" /></td>
</tr>
<tr>
<td width="100" align="right">性别：</td>
<td>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
<input type="radio" name="sex" value="打死不说" />打死也不说
</td>
</tr>
<tr>
<td width="100" align="right">爱好：</td>
<td>
<label><input type="checkbox" name="aihao" value="1" />篮球</label>
<label><input type="checkbox" name="aihao" value="2" />排球</label>
<input type="checkbox" name="aihao" value="3" />足球
<input type="checkbox" name="aihao" value="4" />中国足球
</td>
</tr>
<tr>
<td width="100" align="right">身份：</td>
<td>
<select name="shenfen" size="4">
<option value="1" >已工作</option>
<option value="2" >大学</option>
<option value="3" >中学</option>
<option value="4" >什么叫身份</option>
</select>
</td>
</tr>
<tr>
<td width="100" align="right">居住地：</td>
<td>
<select name="sheng" size="1">
<option value="1" >北京</option>
<option value="2" selected="selected">上海</option>
<option value="3" >山东</option>
<option value="4" >河北</option>
</select>
<br />
<select name="city" >
<option value="" >请选择城市</option>
<option value="1" >北京</option>
<option value="2" >上海</option>
<option value="3" >济南</option>
<option value="4" >青岛</option>
<option value="5" >石家庄</option>
<option value="6" >邯郸</option>
</select>
</td>
</tr>
<tr>
<td width="100" align="right">你的简历：</td>
<td>
<textarea name="jianli" rows="4" cols="40"></textarea>
</td>
</tr>
<tr>
<td width="100" align="right">你的照片：</td>
<td><input type="file" name="zhaopian" /></td>
</tr>
<tr>
<td width="100" align="right"></td>
<td>
<input type="submit" name="submit1" value="免费注册" />
<input type="reset" name="reset1" value="重置" />
<input type="button" name="button1" value="普通按钮" />
</td>
</tr>
<tr>
<td width="100" align="right"></td>
<td>
<label><input type="checkbox" name="tongyi" value="1" />同意注册协议</label>
</td>
</tr>
</table>
</form>
</body>
实现效果：
实现效果
如果你看到这里！你都懂了！那么~你的表单和表格棒棒哒！
网友评论