表单应用场景
登陆注册形式场景。表单本身是不可见的，只是代表一块区域
界面效果
image.png
代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>账户注册信息</title>
</head>
<body>
<h1 align="center">账户注册</h1>
<hr color ="green"/>
<form>
<table width="600px" align="center">
<tr>
<td>姓名：</td>
<td><input type="text" name="userName" placeholder="请输入姓名" maxlength="6" size="50"></td>
<!-- text 单行文本域，name:文字域的名字（请求的key名字） placeholder:提示信心 maxlength最大长度 value默认值 size宽度-->
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" name="email" value="@163.com" size="50"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="pws" placeholder="请输入密码" maxlength="6" size="50"></td>
<!-- 不可见时用type="password" -->
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="pws" placeholder="请再次输入密码" maxlength="6" size="50"></td>
</tr>
<tr>
<td>上传照片：</td>
<td><input type="file" name="file"></td>
<!-- 上传文件 -->
</tr>
<tr>
<td>性别:</td>
<td>男<input type="radio" name="sex1" value="man" />
女<input type="radio" name="sex1" value="woman" />
保密<input type="radio" name="sex1" value="baomi" checked />
</td>
<!-- 单选框 type="radio" 传送到服务器的值为value中的值。要实现单选，要注意name要一致-->
</tr>
<tr>
<td>城市：</td>
<td>
<select name="city">
<option value="beijing" >--请选择--</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="tianjing">天津</option>
<option value="chengdu">成都</option>
<option value="changsha">长沙</option>
</select>
</td>
<!-- 下拉选项 传送到服务器的值为value中的值 -->
</tr>
<tr>
<td>城市：</td>
<td>
<select name="city" size="2" multiple>
<option value="beijing">北京</option>
<option value="shanghai" selected="">上海</option>
<option value="tianjing">天津</option>
<option value="chengdu">成都</option>
<option value="changsha">长沙</option>
</select>
<!-- 下拉选项多项选择 传送到服务器的值为value中的值 selected为默认选中 multiple为可以多选-->
<select name="city" size="5">
<optgroup label="华北">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</optgroup>
<optgroup label="华东">
<option value="tianjing">天津</option>
<option value="chengdu">成都</option>
<option value="changsha">长沙</option>
</optgroup>
</select>
<!-- 下拉分组 -->
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
读书<input type="checkbox" name="favor" value="read" checked />
跳舞<input type="checkbox" name="favor" value="dance" />
唱歌<input type="checkbox" name="favor" value="singing" />
</td>
<!-- 复选框 传送到服务器的值为value中的值 -->
</tr>
<tr>
<td>
<input type="button" name="btn" value="配合js提交数据">
<input type="submit" name="submit" value="提交数据">
<input type="reset" name="reset" value="重置数据">
<input type="image" name="image_btn" src="/Users/lvqueen/Pictures/ll.png">
<!-- 图像域 type="image"有提交功能，只是换了图片 -->
<input type="hidden" name="hidden" value="这是对用户不可见但需要提交的信息">
<!-- 隐藏域 -->
</td>
<td></td>
</tr>
<tr>
<td>个人说明：</td>
<td><textarea name="des" placeholder="请描述一下你自己" rows = "5" cols="60px"></textarea>
</td>
<!-- textarea 多行文本域，可以写多行 placeholder为提示信息，rows为行数，cols为显示的高度 -->
</tr>
</table>
</form>
</body>
</html>
关于提交数据到服务
image.png
