表单标签
在我们日常接触中只要在网站输入账号密码就能登录自己的账号,那么用户数据是怎么和服务器进行交互?答案就是使用HTML表单(form)把浏览者输入的数据传送到对应的服务器端,然后服务器端程序对表单传过来的数据进行处理。
定义一个表单的范围: <form></form>
属性 action: 提交到的地址,默认提交到当前页面
输入项: 可以输入或者选择内容的部分 (一定要加上name属性 不然无法传值)
大部分输入项使用 <input type=”输入项的类型”/>
普通输入项: <input type=”text”/>
密码输入项: <input type=”password”/>
单选输入项: <input type=”radio”/>
name属性相同的在一起单项选择
复选输入项: <input type=”checkbox”/>
name属性相同的在一起多项选择
文件输入项(在后面上传的时候用到)<input type=”file”/>
下来输入项(不在input标签里面)
<select name=”birth>
<option value=”1991”>1991</option>
<option value=”1992”>1992</option>
<option value=”1993”>1993</option>
</select>
文本域
<textarea cols=”10” row”10”></textarea>
隐藏项(不会显示在页面上,但是存在于html代码里面)
<input type=”hidden”/>
提交按钮
<input type=”submit”/ value=”登入”>
例子
<html>
<form action="01.html">
用户名:<input name="uname" type="text" maxlength="16"></input>只能输入字母或数字,4-16个字符<br/>
密 码 :<input name="upass" type="password" maxlength="12"></input>密码长度6-12位<br/>
确认密码:<input name="upass2" type="password" maxlength="12"></input>
性 别 :<input type="radio" name="sex" value="m" checked="checked">男</input><input type="radio" name="sex" value="w">女</input><br/>
爱好:<input type="checkbox" name="love" value="Y"/>羽毛球
<input type="checkbox" name="love" value="W"/>网球
<input type="checkbox" name="love" value="Z"/>足球<br/>
电子邮件地址:<input name="email" type="text"></input>输入正确的Email地址<br/>
出生日期:
<input name="year" type="text"></input>
<select name="month" id="months">
<option value=”1”>1</option>
<option value=”2”>2</option>
<option value=”3”>3</option>
</select>月
<select name="day" id="days">
<option value=”1”>1</option>
<option value=”2”>2</option>
<option value=”3”>3</option>
</select>日<br/>
自我描述:<textarea cols="10" rows="10" name="tex"></textarea><br/>
隐藏项:<input type=”hidden” name="hid" /><br/>
<input type="submit" value="同意以下协议条款并提交"></input><br/>
</form>
</html>
当点击提交后
当前表单的地址栏出现变化,由于表单属性 action 指定跳转地址为 01.html
于是表单数据传递到了01.html 并且地址栏显示格式如下
file:///C:/Users/hp/Desktop/01.html?uname=12&upass=12&upass2=12&sex=m&love=Y&email=12&year=12&month=%A1%B11%A1%B1&day=%A1%B11%A1%B1&tex=1223&hid=123