表单标签项type属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签项type属性</title>
</head>
<body>
<!--表单标签-->
<!--
form:定义表单，可用于指定数据的采集范围。
* 属性：
action ：指定提交数据的 URL
method ：指定提交数据的方式
一共有7种提交方式，但只讲两种比较常用的：get、post
get：
1.请求参数会在地址栏之中显示出来（如：账户和密码的参数）（会封装到请求行中，HTTP协议之后讲解）；
2.请求参数的长度大小有限制；
3.不太安全。
post：
1.请求参数不会在地址栏中显示出来，会封装在请求体之中（HTTP协议之后讲解）；
2.请求参数的长度大小没有限制；
3.比较安全。
-
* 表单项中的数据想要被提交，必须指定其name的属性。
* 表单项标签:
* input: 可以通过type 属性值，改变元素展示的样式
* type 属性：
* text ：文本输入框，默认值
* placeholder ：制定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
* password ： 密码输入框
* radio ：单选框
* 注意：
1.要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
2.一般会给每一个单选框提供value 属性，指定其被选中后提交的值
3.checked属性，可以指定默认值
* checkbox ：复选框
*注意：
1.一般会给每一个单选框提供value属性，指定其被选中后提交的值
2. checked 属性，可以指定默认值
* file ：文件选择框
* hidden： 用于提交一些信息。
* 按钮：
* submit: 提交按钮，
* button：一个提交按钮
* image ：图片提交按钮
*src属性指定图片的路径
* lable ：注意输入项的文字描述信息
* 注意：
* lable的for 属性一般会和input的id 属性值对应，如果对应了，则点击lable标记的内容，input 文本框就会获取焦点。
*
* select : 下拉列表
* option : 用来指定列表项
*
* textarea : 文本域
*
-->
<form action="#" method="get">
<label for="username">用户账号</label>：<input type="text" placeholder="请输入用户名" id="username"><br>
用户密码：<input type="password" placeholder="请输入用户密码" name="password"><br>
用户性别：<input type="radio" name="gender" value="male"checked="checked"> 男
<input type="radio" name="gender" value="female"> 女<br>
个人爱好：<input type="checkbox"name="hobby"value="walk"> 逛街
<input type="checkbox"name="hobby"value="sleep"> 睡觉
<input type="checkbox"name="hobby"value="love"checked> 跑步
<input type="checkbox"name="hobby"value="frends"> 约会
<input type="checkbox"name="hobby"value="money"> 玩游戏 <br>
图 片：<input type="file" name="file"><br>
<input type="submit" value="登陆">
<input type="button" value="一个按钮"><br>
取色器： <input type="color" name="color"> <br>
时间：<input type="time" naem="birthday"><br>
生日：<input type="date" naem="birthday"><br>
生日：<input type="datetime-local" naem="birthday"><br>
年龄：<input type="number" naem="age"><br>
<input type="image"src="image/pp1.jpg">
省份：<select name="province">
<option value="">--请选择--</option>
<option value="1" selected>北京</option>
<option value="2">上海</option>
<option value="3">陕西</option>
<option value="4">深圳</option>
</select><br>
<label for="drowself">自我描述</label>:<textarea cols="50" rows="20" id="drowself" name="self"></textarea>
</form>
</body>
</html>
敲击简单的案例：
做一个如图所示的用户注册页面：（用HT
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册页面</title>
</head>
<body>
<!--定义表单-->
<form action="#" method="post">
<table border="1" align="center" width="500">
<tr>
<td colspan="2"align="center">欢迎注册！</td>
</tr>
<tr>
<td align="center"><label for="username">用户名:</label> </td>
<td><input type="text"name="username"id="username"></td>
</tr>
<tr>
<td align="center"><label for="password">密码:</label> </td>
<td ><input type="password"name="username"id="password"></td>
</tr>
<tr>
<td align="center"><label for="usersname">姓名：</label></td>
<td><input type="text" name="username"id="usersname"></td>
</tr>
<tr>
<td align="center"><label for="email">Email:</label></td>
<td><input type="email"name="useremail"id="email"></td>
</tr>
<tr>
<td align="center"><label for="tel">手机号:</label> </td>
<td><input type="tel"name="tel"id="tel"></td>
</tr>
<tr>
<td align="center"><label >性别：</label></td>
<td>
<input type="radio" name="gender"value="male">男
<input type="radio" name="gender"value="female">女
</td>
</tr>
<tr>
<td align="center"><label for="birthday">出生日期:</label></td>
<td><input type="date"name="birthday"id="birthday"></td>
</tr>
<tr>
<td align="center"><label for="checkcode">验证码:</label></td>
<td>
<input type="text"name="checkcode"id="checkcode">
<img src="image/verrify_code.jpg"><!--这里的图片只是一个静止的验证码的图片，如果电脑上没有这个图片可以任意指定一张自己电脑上的图片来显示。-->
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>
扫一扫
1731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
