2019-10-24 表单标签
2019-10-24 本文已影响0人
任地狱丶
今天学习了html表单
HTML表单（<form></form>标签）
属性：
1 action：决定表单提交的地址。
2 method:指定提交表单的方式
* get：
1.请求参数会在地址栏中显示。
2.请求参数大小是有限制的。
3.不太安全。
* post：
1.请求参数不会再地址栏中显示。
2.请求参数的大小没有限制。
3.较为安全。
<input>标签：用于输入 其type属性决定其作用。
- text ：文本框。 用于让用户输入信息。 placeholder的用法是在文本框为空时提示用户
<input name="用户名" placeholder="请输入用户名">
- password:密码框
<input name="密码" type="password" placeholder="请输入密码">
3.radio：单选框 name属性值相同的单选框则为一组 checked属性指定初始被选中的单选框
<label><input name="性别" type="radio" value="男" checked="checked">男</label>
<label><input name="性别" type="radio" value="女">女</label>
4.file:文件选择框，用于上传文件。
<input type="file" name="文件" id="文件" />
5.复选框标签<checkbox>
<input name="爱好" type="checkbox" value="玩游戏">玩游戏
<input name="爱好" type="checkbox" value="气味儿">气味儿
<input name="爱好" type="checkbox" value="阿萨德">阿萨德
下拉列表<select>
select必须配合子标签<option>使用，用于制作下拉列表
<select name="籍贯">
<option value="北京">北京</option>
<option value="qwe京">qwe</option>
<option value="asd">asd</option>
<option value="zxc京">zxc</option>
<option value="gd京">gf京</option>
<option value="北fsadasdsa京">北fdsadsad京</option>
<option value="北qweqwewqd京">北wqeqwewq京</option>
<option value="北aasd京">北aasd京</option>
</select>
HTML5新增的类型
取色器：<input type="color" name="color"><br>
生日：<input type="date" name="birthday"> <br>
生日：<input type="datetime-local" name="birthday"> <br>
邮箱：<input type="email" name="email"> <br>
年龄：<input type="number" name="age"> <br>
textarea：文本域
* cols：指定列数，每一行有多少个字符
* rows：默认多少行。
下面是我使用表格佳航表单标签做出来的注册界面
先上代码⑧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body background="imgx/regist_bg.jpg">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<form>
<table border="3px" bordercolor="grey" width="80%" align="center" cellspacing="0px" cellpadding="5px">
<tr>
<td>用户名</td>
<td><input name="用户名" placeholder="请输入用户名"></td>
</tr>
<tr>
<td>密码</td>
<td><input name="密码" type="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td>确认密码</td>
<td><input name="确认密码" type="password"></td>
</tr>
<tr>
<td>邮箱</td>
<td><input name="邮箱" type="email"></td>
</tr>
<tr>
<td>颜色</td>
<td><input name="颜色" type="color"></td>
</tr>
<tr>
<td>性别</td>
<td><input name="性别" type="radio" checked="checked" value="男">男<input name="性别" type="radio" value="女">女</td>
</tr>
<tr>
<td>爱好</td>
<td><input name="爱好" type="checkbox" value="玩游戏">玩游戏<input name="爱好" type="checkbox" value="气味儿">气味儿
<input name="爱好" type="checkbox" value="阿萨德">阿萨德</td>
</tr>
<tr>
<td>籍贯</td>
<td><select name="籍贯">
<option value="北京">北京</option>
<option value="qwe京">qwe</option>
<option value="asd">asd</option>
<option value="zxc京">zxc</option>
<option value="gd京">gf京</option>
<option value="北fsadasdsa京">北fdsadsad京</option>
<option value="北qweqwewqd京">北wqeqwewq京</option>
<option value="北aasd京">北aasd京</option>
</select></td>
</tr>
<tr>
<td>头像</td>
<td><input name="头像" type="file"></td>
</tr>
<tr>
<td>简介</td>
<td><textarea name="简介" cols="20" rows="4">我是：</textarea></td>
</tr>
<tr>
<td>生日</td>
<td><input name="生日" type="datetime-local"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="提交"><input type="reset" name="重置"></td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body background="imgx/regist_bg.jpg">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<form>
<table border="3px" bordercolor="grey" width="80%" align="center" cellspacing="0px" cellpadding="5px">
<tr>
<td>用户名</td>
<td><input name="用户名" placeholder="请输入用户名"></td>
</tr>
<tr>
<td>密码</td>
<td><input name="密码" type="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td>确认密码</td>
<td><input name="确认密码" type="password"></td>
</tr>
<tr>
<td>邮箱</td>
<td><input name="邮箱" type="email"></td>
</tr>
<tr>
<td>颜色</td>
<td><input name="颜色" type="color"></td>
</tr>
<tr>
<td>性别</td>
<td><input name="性别" type="radio" checked="checked" value="男">男<input name="性别" type="radio" value="女">女</td>
</tr>
<tr>
<td>爱好</td>
<td><input name="爱好" type="checkbox" value="玩游戏">玩游戏<input name="爱好" type="checkbox" value="气味儿">气味儿
<input name="爱好" type="checkbox" value="阿萨德">阿萨德</td>
</tr>
<tr>
<td>籍贯</td>
<td><select name="籍贯">
<option value="北京">北京</option>
<option value="qwe京">qwe</option>
<option value="asd">asd</option>
<option value="zxc京">zxc</option>
<option value="gd京">gf京</option>
<option value="北fsadasdsa京">北fdsadsad京</option>
<option value="北qweqwewqd京">北wqeqwewq京</option>
<option value="北aasd京">北aasd京</option>
</select></td>
</tr>
<tr>
<td>头像</td>
<td><input name="头像" type="file"></td>
</tr>
<tr>
<td>简介</td>
<td><textarea name="简介" cols="20" rows="4">我是：</textarea></td>
</tr>
<tr>
<td>生日</td>
<td><input name="生日" type="datetime-local"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="提交"><input type="reset" name="重置"></td>
</tr>
</table>
</form>
</body>
</html>
背景图片在下面自取：
regist_bg.jpg
最后的效果如下
QQ截图20191024190004.jpg
