input标签详解,用户注册表单
input标签的;
action; 把数据提交给服务器的地址,若没有就提交给自己
method ; 提交的方式(post , get )
type中可以指定的 number tel 来指定数字 电话号码 或者使用date 来指定时间
- 含有text <input type=“text” name="username" placeholder=“请输入name” > name属性会随提交(form)到其他页面 就是作为参数
- password
- file (上传文件的)
- radio (单选按钮,比如选择性别的时候 给起一个名字(名字相同的话)只能单选
默认的是chacked ="checked"
- checkbox 多选(方框) 复选按钮
默认的是chacked ="checked" (可以写多个默认勾选)
- textarea 一个区域的文本框 设置 cols 和rows 来定框的大小
style =reset-non 不重新设置大小;
---------------------------------------------------------------------------------------------------------------------------------
- select 标签 下拉列表 请选择 option 子标签;
提交按钮 <input type=“submit ” value=“提交,注册”/>
重置按钮<input type= "reset' value="重置">
普通按钮<input type="botton" value="普通" >
botton 按钮具有默认提交表单的功能,如果不指定type 就会提交表单
-------------------------------------------------------------------------------------------------------------------------------------------
- form 表单标签 提交的内容 包裹所需要提交的内容
action 属性 要提交的地址 # 代表是本地地址
method get 方式(默认的提交方式,,把请求方式拼接在请求页面,有大小的限制4KB)
post方式(把请求方式封装在请求体中)
<form action="#" method="get" name="要提交参数的Key " ></form>
只有存在name时候才能 接收数据
----------------------------------
必须要有name 才能够提交;
若是单选或者复选框,必须提供value ,
<input type="hidden" name=" " value="隐藏域,主要储存页面的ID等信息" />
-------------------------------------------------------------------------------------------------------------------------------------------
placeholder 是一种提示信息
提交按钮;
<input type="submmit" value =" 提交 ">
<input type ="image" src=" ... " value="" >
使用 lable 标签来定义,查找;<lable></lable>
附代码;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单提交</title>
</head>
<body>
<!--只有在form中定义name浏览器才能够提交数据 -->
<form action="#" method="get" name="getForm">
<!-- 用户名 <input type="text" name="username">
密码 <input type="password" name="password">
<input type="submit" value="提交" >-->
<!--单选框和复选框必须定义 name, value ,默认值checked -->
<!-- 性别; <input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<br/>
兴趣爱好; <input type="checkbox" name="hobby" value="sw"> 游泳
<input type="checkbox" name="hobby" value="re"> 看书
<input type="checkbox" name="hobby" value="tr"> 旅游
<input type="checkbox" name="hobby" value="sle"> 睡觉
<br/>
<input type="submit" value="提交啦">-->
<!-- <select name="dd" id="findby">
<option value="zhizhi">日本</option>
<option value="zhizhi">美国</option>
<option value="zhizhi">朝鲜</option>
<option value="zhizhi">俄罗斯</option>
</select>
<input type="submit" value="提交">-->
<!--input标签中type=text,value默认的,placeholder是隐藏的文字 -->
<!-- 请输入账户;<input type="text" value="请输入账户" name="zhanghu"><br/>
请输入密码;<input type="password" placeholder="请输入密码" name="password">
<input type="submit" value="提交按钮">-->
<!-- input标签, 文件上传 type=file-->
<!-- <input type="file">
<input type="submit" value="提交">-->
<!--input标签中隐藏域,hidden-->
<!-- <input type="hidden" name="这是隐藏域" value="这是隐藏域对应的值">
<button value="提交">提交啊</button><!– button标签默认有提交的功能–>-->
<!--文本域areatext标签 指定style="resize:none" 使文本框不能被拉伸 ,图片按钮typeimage -->
自我介绍;<textarea name="jieshao" id="1" cols="30" rows="10" style="resize: none"></textarea>
<br/>
用户名;<input type="text" name="username">
<input type="image" src="../img/0x424410190743.jpg">
</form>
</body>
</html>
用户注册表单;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<form action="#" name="register" method="get">
<!--分析用户注册,表头h 8行2列
用户名 密码 性别 爱好 学历照片 个人简介 其中lable标签
-->
<h2>用户注册</h2>
<table width="500px">
<tr>
<td><lable for="username">用户名</lable></td>
<td><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
</tr>
<tr>
<td><lable>密码</lable></td>
<td><input type="password" name="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td><lable for="gender">性别</lable></td>
<td>
<input type="radio" name="gender" id="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="radio" name="gender" value="null">妖
</td>
</tr>
<tr>
<td><lable>爱好</lable></td>
<td>
<input type="checkbox" name="hobby" value="sw">游泳
<input type="checkbox" name="hobby" value="ds">读书
<input type="checkbox" name="hobby" value="ly">旅游
<input type="checkbox" name="hobby" value="qj">拳击
</td>
</tr>
<tr>
<td><lable>学历照片</lable></td>
<td><input type="file" name="username" placeholder="请输入用户名"></td>
</tr>
<tr>
<td><lable>个人简介</lable></td>
<td><textarea name="jianjie" id="1" cols="30" rows="10"></textarea></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="点击">
</td>
</tr>
</table>
</form>
</body>
</html>
下一篇: 标签系统