表单标签简介:
功能:提交数据到某服务器
<form></form>:定义一个表单范围
属性:action:提交到地址,默认提交到当前页面
method:表单提交方式:get(默认)和post
get和post的区别:(1)get请求地址栏会携带提交的数据,post不携带提交的数据
(2)get请求安全性低,post较高
(3)get请求数据大小有限制,post没有限制
输入项:
功能:可以输入内容或者选择内容的部分
大部分的输入项使用<input type="输入项"/>,在每个输入项里面需要一个name属性
a.普通输入项:<input type="text"/>
b.密码输入项:<input type="password"/>
c.单选输入项:<input type="radio"/>
--需要属性name
--name属性值必须相同
--必须有一个value值
*实现默认选中项:设置属性checked=“checked”
d.复选输入项:<input type="checkbox"/>
--需要属性name
--name属性值必须相同
--必须有一个value值
*实现默认选中项:设置属性checked=“checked”
e.文件输入项:<input type="file"/>f.下拉输入项:(不是在input标签中实现)
<select name=" ">
<option value = " ">选项一</option>
<option value = " ">选项二</option>
</select>
g.文本域:<textarea cols = "10" rows = "10">文本内容</textarea>
h.隐藏项:(不会出项在页面上,但是存在于html代码中)
<input type = "hidden"/>
i.提交按钮:
<input type = "submit" value = “显示内容“ />
j.使用图片提交:
<input type = "image" src= “图片路径“ />
k.重置按钮:
<input type = "reset" value = “ 重置注册“ />
---重置是回到输入项的初始状态
l.普通按钮:
<input type = "button" value = “ “ />
-----和js一起使用
所有的标签字符都是在英文字符的情况下输入
举一个栗子
运行结果:
源码:
<html>
<head>
<title> 表单实例 </title>
</head>
<body>
<font size="5"color="#000000" ><b>免费开通人人网账号</b></font>
<form>
<table borber="1" bordercolor="#000000">
<tr>
<td>注册邮箱:</td>
<td><input type="text"/></td>
</tr>
<tr>
<td> </td> <!--单元格占位符是什么???-->
<td>你还可以使用账号<a href="#">注册</a>或者<a href="#">手机号注册</a></td>
</tr>
<tr>
<td align="right">创建密码: </td>
<td><input type="password"></td>
</tr>
<tr>
<td align="right"> 真实姓名:</td>
<td><input type="text"></td>
</tr>
<tr>
<td align="right">性别:</td>
<td> <input type="radio" name="sex" value="nv"/checked=“checked”>女<input type="radio" name="sex" value="nan"/>男</td>
</tr>
<tr>
<td align="right"> 生日:</td>
<td>
<select name="year">
<option value="1991" selected="selected">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>
<select name="month">
<option value="1"selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select>
<option value="1"selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<tr>
<td align="right">我现在:</td>
<td>
<select name="work">
<option value="study"selected="selected">我正在上学</option>
<option value="work">我已经工作</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td><img src="表单标签.html/picture.gif"/></td>
<td> <a href="#">看不清换一张</a></td>
</tr>
<tr>
<td align="right">验证码:</td>
<td><input type="text" name="yanzhengma"></td>
</tr>
<tr>
<td></td>
<td><input type="image" src="Hydrangeas.jpeg"/></td>
</tr>
</table>
</form>
</body>
</html>