表单实现前后台交互:用户将表单提交到后台再右后台提交到数据库的过程,实现前后端交互。
以下简述from表单中出现的属性及其含义或用法:
<form ></from>表单标签,一般从来做注册、登录页面,action=" "存放的是将表单链接到后台接口的地址,method表示请求的方式,其中get请求表示将参数拼接在url后面,通过?来分割,其传递参数较少,post请求表示将参数存放在请求体中,这种请求方式比较安全,转递参数较多。
enctype表示编码方式,其中enctype='application/x-www-form-urlencoded'时浏览器就会将参数转换为【查询字符串 qs】格式,当有附件在表单中的时候,enctype务必设置为enctype="multipart/form-data"这种格式。
input里面的name:不能省略,其作为参数中的key,value:作为参数中的value,在按钮中务必指定value值,type+text表示单行文本框,用于输入用户名等。type+password表示密码框,用于输入密码等。type+submit 表示提交按钮,用于设置点击按钮,例如注册按钮,登录按钮等。type+file表示附件选择器,用于上传文件等。type+radio 表示单选按钮,用于选择性别等单选事件等。type+checkbox 表示复选按钮,用于选择爱好等多选事件等。checked: 单值属性 默认选中,用于设置默认值等。placeholder:提示语,提示用户输入内容格式等提示语。
h5拓展标签(兼容性不好,功能不强) 例如:邮箱:email,生日:date,进度条:progress等等
select表示下拉列表,其中option标签中的文本显示在网页中,提交的值应该是option的value值,当这个值没有设定的时候,提交的是标签中的文本。一般用于下拉选择年、月、日或者地区等。
textarea表示多行文本域,在表单中一般用于描述个人简介等。
以下是我个人写得一个注册表代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>注册表单</title>
</head>
<body>
<form action="" method="post">
<table>
<tbody>
<!--用户名-->
<tr>
<td>用户名:</td>
<td><input placeholder="请输入用户名" type="text" name="username"></td>
</tr>
<!--密码-->
<tr>
<td>密码:</td>
<td><input type="password" name="password"></td>
</tr>
<!--真实姓名-->
<tr>
<td>真实姓名:</td>
<td><input type="text" name="name"></td>
</tr>
<!--邮箱-->
<tr>
<td>邮箱:</td>
<td><input type="text" name="email"></td>
</tr>
<!--性别-->
<tr>
<td>性别:</td>
<td>
<label for="gender_male"><input id="gender_male" type="radio" name="gender" value="male">男</label>
<label for="gender_female"><input id="gender_female" type="radio" name="gender" value="female" checked>女</label>
</td>
</tr>
<!--爱好-->
<tr>
<td>爱好:</td>
<td>
<label><input type="checkbox" name="hobby" value="lq">篮球</label>
<label><input type="checkbox" name="hobby" value="zq">足球</label>
<label><input type="checkbox" name="hobby" value="bq" checked>棒球</label>
<label><input type="checkbox" name="hobby" value="wq">网球</label>
</td>
</tr>
<!--地址-->
<tr>
<td>地址:</td>
<td>
<select name="province">
<option value="js">江苏</option>
<option value="sx">山西</option>
<option value="hn">湖南</option>
<option value="gd">广东</option>
<option value="jl">吉林</option>
<option value="hlj">黑龙江</option>
</select>省
<select name="city">
<option value="sz">苏州</option>
<option value="cs">长沙</option>
<option value="gz">广州</option>
<option value="cc">长春</option>
<option value="qqhe">齐齐哈尔</option>
<option value="ty">太原</option>
<option value="nj">南京</option>
<option value="fs">佛山</option>
<option value="heb">哈尔滨</option>
<option value="nt">南通</option>
<option value="jl">吉林</option>
</select>市
<input type="text" name="address"> 区/县
</td>
</tr>
<!--个人介绍-->
<tr>
<td>介绍:</td>
<td><textarea placeholder="请编写个人介绍" name="des" value="des" cols="46" rows="12"></textarea></td>
</tr>
<!--注册-->
<tr>
<td rowspan="2"><input type="submit" value="注册"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
注册表如下图: