第一章 表单基本结构
主要内容
- 表单应用场景
主要作用：收集信息
image.png
- 表单结构
image.png
- 常用表单元素使用
image.png
image.png
image.png
注：input为单标签，没有结束标签
注意：
所有元素都应写在form标签内；
form标签本身不在网页中显示。
- 表单交互属性
- 案例
第二章 表单元素
image.png
image.png
image.png
相同name值的情况下只能有一个选项
eg..
image.png
在input里＋checked，表示默认选中
eg..
image.png
如上图表示默认选中“保密”
image.png
image.png
注：运用value可以修改按钮名字！！
image.png
image.png
注：该功能用于针对用户隐藏信息
下拉菜单和列表标签
- 优点：节约空间且美观
image.png
image.png
注：value里面的东西才是传给服务器的，北京天津等是显示在网页上的
image.png
注：＋multiple表示可以按住Ctrl键进行多项选择；
＋size表示一次可显示出多个选项。eg size=“4”表示一次显示4个选项。
image.png
注：selected的效果相当于上文提到的checked，都表示默认选择
分组下拉菜单和列表标签
image.png
image.png
注意与单行文本域进行区分！！！
image.png
第三章 表单页面调整
image.png
image.png
注意：
image.png
第四章 总结
略
以下是钟琳天才的杰作
<!DOCTYPE html>
<html>
<head>
<title> 表单 </title>
<meta charset="utf-8">
</head>
<body>
<form action="#" method="post" name="bet" target="blank">
<table bgcolor="#f2f2f2" align="center">
<tr>
<td> 姓名 </td>
<td> <input type="text" name="username" placeholder="输入您的姓名..."/> </td>
</tr>
<tr>
<td> 下拉 </td>
<td>
<select name="city" size="1">
<option value="qxz"> 请选择 </option>
<option value="nj"> 南京 </option>
<option value="xa"> 西安 </option>
<option value="xm"> 厦门 </option>
</select>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td> 性别 </td>
<td>
<input type="radio" name="sex" value="man" checked />男生
<input type="radio" name="sex" value="woman"/>女生
</td>
</tr>
<tr>
<td> 多选 </td>
<td>
<input type="checkbox" name="dx1" value="eat" />吃东西
<input type="checkbox" name="dx2" value="sleep" />睡大觉
<input type="checkbox" name="dx3" value="run" />跑跑步
<input type="checkbox" name="dx4" value="watch movie" />看电影
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td> 文本 </td>
<td>
<textarea name="wb" rows="3" cols="50" placeholder="请输入文本内容...">
</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="submit" value="提交"/>
<input type="reset" name="reset" value="取消"/>
</td>
</tr>
</table>
</form>
</body>
</html>
