当用户在前端输入信息时，如何提交到后端记录或处理这批数据？表单闪亮登场。
语法：
<form action="" method="" name="" ····>
表单元素
</form>| 属性 | 值 | 描述 |
| action | url | 提交表单的地址 |
| method | get、post | |
| name | form_name | |
| target | _blank、_self、_parent、_top | 在何处打开 |
| enctype | 发送表单数据之前如何对其进行编码 |
get:使用URL发送数据，对发送数据的数量有限制。通常用于获取数据。因为填写的信息会以？属性="值"&属性=“值”的形式展示在地址栏，所以不安全。
post:表单数据作为HTTP请求体的一部分，对所发送信息的数量无限制，一般用于修改服务器上的资源。信息不会暴露在地址栏，安全。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>INPUT输入</title>
</head>
<body>
<h1 align="center">注册信息</h1>
<hr color="red" width="80%"/>
<form>
<table align="center" >
<tr>
<td align="right">姓名：</td>
<td><input type="text" SIZE="30" name="username" maxlength="6" placeholder="请输入姓名"/></td>
</tr>
<tr>
<td align="right">邮箱：</td>
<td><input type="text" value="@qq.com" size="30" name="mail"/></td>
</tr>
<tr>
<td align="right">密码：</td>
<td><input type="password" placeholder="请输入密码" size="30" name="password"/></td>
</tr>
<tr>
<td align="right">确认密码：</td>
<td><input type="password" placeholder="请再次输入密码" size="30" name="pass_confirm"/></td>
</tr>
<tr>
<td align="right">上传文件：</td>
<td><input type="file" size="30" name="file" value="dianji"/></td>
</tr>
<tr>
<td align="right">性别：</td>
<td><input type="radio" name="sex" value="man"/>男<input type="radio" name="sex" value="woman" />女</td>
</tr>
<tr>
<td align="right">爱好：</td>
<td><input type="checkbox" name="hobby" value="sing"/>唱歌
<input type="checkbox" name="hobby" value="dance"/>跳舞
<input type="checkbox" name="hobby" value="tour" checked/>旅游<!--checked是默认选中状态-->
</td>
</tr>
<tr>
<td align="right">城市：</td>
<td>
<select name="city">
<optgroup label="一线城市">
<option value="bj">北京</option><!--value值是传到后端的实际值，selected是默认选中状态-->
<option value="sh" selected>上海</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
</optgroup>
<optgroup label="二线城市">
<option value="gz">合肥</option>
<option value="sz">杭州</option>
<option value="gz">南京</option>
<option value="sz">长沙</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td align="right">简介：</td>
<td><textarea cols="30" rows="3"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" name="button" value="按钮" /><!--button按钮通常是配合js脚本使用-->
<input type="submit" name="submit" value="提交"/>
<input type="reset" name="reset" value="重置"/>
<input type="image" name="img_button" src="C:\Users\jingan\Desktop\html.jpg" value="1"/>
<!-- 图片按钮实现的也是按钮功能，只不过是将按钮上的文字换成了图片，更美观-->
</td>
</tr>
<tr>
<td><input type="hidden" name="hidden" value="123"/></td>
<!-- 当前端的数据需要传递到后端又不需要在前端展示给用户时使用隐藏域-->
<td></td>
</tr>
</table>
</form>
</body>
</html>运行结果：
input标签属性：
| TYPE属性值 | 描述 |
| text | 文字域 |
| password | 密码域 |
| file | 文件域 |
| checkbox | 复选框 |
| radio | 单选框 |
| button | 按钮 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| hidden | 隐藏域 |
| image | 图片按钮 |
单行文本域属性：
name:文字域的名字； maxlength:指定输入的最大字符长度； placeholder:规定用户填写输入字段的提示
size：指定文本框的宽度，默认长度为20 value:值
图像域：
<input type="image" name =“” src="url" ········/>
隐藏域：
<input type="hidden" name="" value="" /> 传递前端不需要展示给用户的信息到后端
下拉菜单和列表标签：
<select name="" size="" multiple> <!--size设置展示出来的数量，multiple设置可多选-->
<option value=" ">选项</option> <optgroup label="组一">分组的option</optgroup>
<option value=" ">选项</option>
</secect>多行文本域：
<textarea name="" cols="" rows="" placeholder="">内容</testarea>
扫一扫
80
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
