HTML表单
2020-07-06 本文已影响0人
爪爪123
表单基础结构
表单语法
截屏2020-07-06下午4.14.19.png
截屏2020-07-06下午4.14.48.png
<input>标签
截屏2020-07-06下午4.16.07.png
截屏2020-07-06下午4.16.48.png
<form>
姓名：<input type="text" name="username"/>
密码：<input type="password" name="paw"/>
<input type="Submit" />
</form>
截屏2020-07-06下午4.21.26.png
单行文本域
截屏2020-07-06下午4.43.20.png
截屏2020-07-06下午4.48.32.png
按钮
截屏2020-07-07上午9.43.47.png
图像域和隐藏域
图像域（图像提交按钮）
截屏2020-07-07上午9.50.44.png
隐藏域
截屏2020-07-07上午10.05.10.png
隐藏域的内容用户看不到，按提交按钮后该内容提交到服务器
<form>
<table bgcolor="#f2f2f2" align="center" width="60%" height = "480px">
<tr>
<td align="right" width = "35%" >姓名：</td>
<td>
<input type="text" name="username" placeholder="请输入姓名" maxlength="6">
</td>
</tr>
<tr>
<td align="right" width = "35%">邮箱：</td>
<td> <input type="text" name="mail" placeholder="" value="@163.com"> </td>
</tr>
<tr>
<td align="right" width = "35%">密码：</td>
<td> <input type="password" name="psw" placeholder="请输入密码"> </td>
</tr>
<tr>
<td align="right" width = "35%">确认密码：</td>
<td> <input type="password" name="psw" placeholder="请再次输入密码"></td>
</tr>
<tr>
<td align="right" width = "35%">上传照片：</td>
<td> <input type="file" name="file" > </td>
</tr>
<tr>
<td align="right" width = "35%">性别：</td>
<!-- checked 表示默认选中 -->
<td> <input type="radio" name="sex" value="men">男 <input type="radio" name="sex" value="women">女<input type="radio" name="sex" value="bm" checked>保密</td>
</tr>
<tr>
<td align="right" width = "35%">爱好：</td>
<td> <input type="checkbox" name="">游泳<input type="checkbox" name="">跑步<input type="checkbox" name="">跳舞</td>
</tr>
<tr>
<td align="right">城市：</td>
<td>
<!-- multiplen 多项选择 selected默认选中-->
<select name="city" >
<option value="">--请选择--</option>
<optgroup label="1组">
<option value="bj" selected>北京</option>
<option value="tj">天津</option>
<option value="fj">福建</option>
<option value="xm">厦门</option>
</optgroup>
<optgroup label="2组">
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="zz">郑州</option>
<option value="jx">嘉兴</option>
</optgroup>
</select>
<select name="city" size="6" multiple>
<option value="bj">北京</option>
<option value="tj">天津</option>
<option value="fj">福建</option>
<option value="xm">厦门</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="zz">郑州</option>
<option value="jx">嘉兴</option>
</select>
</td>
</tr>
<tr>
<td align="right" width = "35%"></td>
<td> <input type="button" name="button" value="来点我"><input type="submit" name="submit"> <input type="Reset" name="reset">
<!-- <input type="image" name="image_button" src="btn_pic.png"/> -->
<input type="hidden" name="hidden" value="这是一个用户注册信息" />
</td>
</tr>
</table>
</form>
下拉菜单和列表标签
截屏2020-07-07上午10.13.40.png
下拉菜单和列表标签
截屏2020-07-07上午10.14.44.png
<option>标签属性
截屏2020-07-07上午10.23.48.png
下拉菜单分组
截屏2020-07-07上午10.30.35.png
<!-- multiplen 多项选择 selected默认选中-->
<select name="city" >
<option value="">--请选择--</option>
<optgroup label="1组">
<option value="bj" selected>北京</option>
<option value="tj">天津</option>
<option value="fj">福建</option>
<option value="xm">厦门</option>
</optgroup>
<optgroup label="2组">
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="zz">郑州</option>
<option value="jx">嘉兴</option>
</optgroup>
</select>
<select name="city" size="6" multiple>
<option value="bj">北京</option>
<option value="tj">天津</option>
<option value="fj">福建</option>
<option value="xm">厦门</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="zz">郑州</option>
<option value="jx">嘉兴</option>
</select>
文字域标签
单行文本域<input>
截屏2020-07-07上午10.36.10.png
多行文本域<textarea>
截屏2020-07-07上午10.37.13.png
<textarea>标签属性
截屏2020-07-07上午10.39.31.png
<!-- 多行文本域 rows文本域的可见行数为6，cols文本域的可见宽度为50-->
<textarea rows="6" cols="50" placeholder="请输入个人信息"></textarea>
表单属性<form>
截屏2020-07-07上午10.48.46.png
截屏2020-07-07上午10.49.19.png
在 form标记符中使用 action 属性指定表单处理程序的位置。
POST 与 GET的区别
截屏2020-07-07上午11.00.59.png
<!DOCTYPE html>
<html>
<head>
<title>注册信息</title>
<meta charset="utf-8">
</head>
<body>
<h1 align="center">注册信息</h1>
<hr color="#336699">
<!-- action 用来提交表单 -->
<form action="action.php" method="post" target="_blank">
<table bgcolor="#f2f2f2" align="center" width="60%" height = "480px" >
<tr>
<td align="right" width = "35%" >姓名：</td>
<td>
<input type="text" name="username" placeholder="请输入姓名" maxlength="6">
</td>
</tr>
<tr>
<td align="right" width = "35%">邮箱：</td>
<td> <input type="text" name="mail" placeholder="" value="@163.com"> </td>
</tr>
<tr>
<td align="right" width = "35%">密码：</td>
<td> <input type="password" name="psw" placeholder="请输入密码"> </td>
</tr>
<tr>
<td align="right" width = "35%">确认密码：</td>
<td> <input type="password" name="psw" placeholder="请再次输入密码"></td>
</tr>
<tr>
<td align="right" width = "35%">上传照片：</td>
<td> <input type="file" name="file" > </td>
</tr>
<tr>
<td align="right" width = "35%">性别：</td>
<!-- checked 表示默认选中 -->
<td> <input type="radio" name="sex" value="men">男 <input type="radio" name="sex" value="women">女<input type="radio" name="sex" value="bm" checked>保密</td>
</tr>
<tr>
<td align="right" width = "35%">爱好：</td>
<td> <input type="checkbox" name="">游泳<input type="checkbox" name="">跑步<input type="checkbox" name="">跳舞</td>
</tr>
<tr>
<td align="right">城市：</td>
<td>
<!-- multiplen 多项选择 selected默认选中-->
<select name="city" >
<option value="">--请选择--</option>
<optgroup label="1组">
<option value="bj" selected>北京</option>
<option value="tj">天津</option>
<option value="fj">福建</option>
<option value="xm">厦门</option>
</optgroup>
<optgroup label="2组">
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="zz">郑州</option>
<option value="jx">嘉兴</option>
</optgroup>
</select>
<select name="city" size="6" multiple>
<option value="bj">北京</option>
<option value="tj">天津</option>
<option value="fj">福建</option>
<option value="xm">厦门</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
<option value="zz">郑州</option>
<option value="jx">嘉兴</option>
</select>
</td>
</tr>
<tr>
<td align="right">简介：</td>
<td>
<!-- 多行文本域 rows文本域的可见行数为6，cols文本域的可见宽度为50-->
<textarea rows="6" cols="50" placeholder="请输入个人信息"></textarea>
</td>
</tr>
<tr>
<td align="right" width = "35%"></td>
<td> <input type="button" name="button" value="来点我"><input type="submit" name="submit"> <input type="Reset" name="reset">
<!-- <input type="image" name="image_button" src="btn_pic.png"/> -->
<input type="hidden" name="hidden" value="这是一个用户注册信息" />
</td>
</tr>
</table>
</form>
</body>
</html>
截屏2020-07-07上午11.05.03.png
