表单初识
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--action你要去往的网址
method提交内容方法
get铭文
post密文 二进制的形式
默认的提交方式get
-->
<form action="#" method="get">
帐号:<input type="text"
name="username"/>
密码:<input type="text"name="password" />
确认密码:<input type="text"
name="apassword"/>
<!--提交按钮-->
<input type="submit" value="提交"/>
</form>
</body>
</html>
表单操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" method="get">
<!--表单可以提交的内容-->
<!--文本输入框
传入服务器的形式
key-value的形式
键值对 集合(容器)
username相当于键值对key
-->
<input type="text" name="username"placeholder="占位符"/>
<!--密码输入框-->
<input type="password"name="" />
<br />
<!--文件输入框 name一般填写文件的名字-->
<input type="file"name="" />
<br />
<!--数字的输入框
step每次增加或减少的值
-->
<input type="number" max="30"min="-3"step="3"/>
<!--大文本输入框-->
<textarea></textarea>
<!--单选框-->
男<input type="radio" name="gender" value="nan"/>
女<input type="radio" name="gender" value="nv" />
<br />
<!--复选框-->
你喜欢的类型<br />
男<input type="checkbox"name="sex"
value="nan" /><br />
女<input type="checkbox"name="sex"
value="nv" /><br />
<!--选择器-->
<select name="">
<option value="ch">中国</option>
<option value="f">法国</option>
<option value="amei">美国</option>
</select>
<!--隐藏提交
你信息 设备信息
-->
<input type="hidden"name="hidden"value="" />
<!--按钮
onclick点击按钮触发事件
-->
<input type="button"οnclick="alert('你点到我了')"
value="请点我"/>
<button οnclick="alert('你又点我了')">点我</button>
<!--提交按钮-->
<input type="submit"value="提交" />
</form>
</body>
</html>
经纬度查询
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="http://api.map.baidu.com/place/v2/search" method="get">
搜索名称:<input type="text" name="query"/><br />
区域:<input type="text"name="region" /><br />
返回数据类型:<select name="output">
<option value="json">json</option>
<option value="xml">xml</option>
</select>
<!--隐藏提交用户的id
6E823f587c95f0148c19993539b99295
UUID全球唯一标识符
-->
<input type="hidden"name="ak"
value="6E823f587c95f0148c19993539b99295" />
<br />
<input type="submit" value="搜索"/>
</form>
</body>
</html>
相关成果展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table>
<tr>
<td>昵称</td>
<td>
<input type="text"name="username" />
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="text"name="password" />
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="text"name="apassword" />
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio"name="gender" value="nan"/>男
<input type="radio"name="gender"value="nv"/>女
</td>
</tr>
<tr>
<td>生日</td>
<td>
<input type="number"max="2017"min="1990"/>
<input type="number"max="12"min="1"/>
<input type="number"max="31"min="1"/>
</td>
</tr>
<tr>
<td>所在地</td>
<td>
<select name="">
<option value="china">中国</option>
<option value="america">美国</option>
<option value="japan">日本</option>
</select>
<select name="">
<option value="hubei">湖北</option>
<option value="guangdong">广东</option>
</select>
<select name="">
<option value="wuhan">武汉</option>
<option value="suizhou">随州</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="sex" value=""/>同时开通QQ空间<br />
<input type="checkbox" name="sex" value="" />不接受同时开通QQ空间
</td>
</tr>
</table>
</body>
</html>