表单标签
表单:输入或选择的组件;用户可以将数据向服务器端提交填写信息
form 表单标签
action=“服务器的地址”
method=“提交的方式 post/get”
input type="" 单行输入文本框
label标签
示例: <lable for="userid">用户名<lable>
size=“边框长”
type=“文本框输入类型”
id="" 不可重复,不可使用数字开头
name="" 向服务器端提交信息的键,可以重复
value=“标签的默认值” 向服务器提交的值
readonly=“readonly” 只读
disabled=“disabled” 不可使用
placeholder=“请输入(提示信息)”
通过name属性分组,name相同的为一组,一组只能选择一个
凡是选择性组件(radio)必须给默认值value
checked="checked"默认选择
select标签(选择标签)
下拉框的name,id,事件等需要在select中定义,而value需要在option中定义.
selected="selected"默认选择
textarea 多行文本域标签
rows cols 定义多行文本域标签的行和列
input按钮标签:
<input type="reset(重填)/submit(提交)/button(按钮)" name="" value="" >
reset 将页面的值改为初始默认值
submit 提交表单内容到服务器
button 普通按钮没有功能，只能被点击触发事件用
内联框架:
内联框架可以在一个窗口内嵌入一个子窗口,从而在子窗口中引入一个外部的页面
frameborder边框宽度
练习一:
<body>
<form action="" method="">
<label for="userid">姓名<label>:
<input type="text" id="userid" name="nameid" value="" placeholder="请输入姓名"/> <br />
密码:<input type="password" placeholder="请输入密码"/> <br />
性别:<input type="radio" id="sex01" name="sex" value="男" checked="checked"/>
<label for="sex01">男</label>
<input type="radio" id="sex02" name="sex" value="女"/>
<label for="sex02">女</label>
<br />
课程:<input type="checkbox" name="course"value="java"/> JAVA
<input type="checkbox" name="course" value="HTML" checked="checked"/> HTML
<input type="checkbox" name="course" value="C"/> C
<br />
爱好:<input type="checkbox" name="hobby"value="java"/> JAVA
<input type="checkbox" name="hobby" value="HTML" checked="checked"/> HTML
<input type="checkbox" name="hobby" value="C"/> C
<br />
省份:<select name="">
<option selected="selected">请选择省份</option>
<option value="610">陕西</option>
<option value="412">河南</option>
<option value="101">北京</option>
</select>
<br />
备注:<textarea name="textarea" rows="5" cols="" value="">
</textarea>
<br />
<input type="reset" value=" 重填 ">
<input type="submit" value=" 登录 " >
<input type="button" value=" BUTTON ">
</form >
</body>
运行结果:
练习二:淘宝注册
目标:
<body>
<a href="http://taobao.com">
<img src="练习/淘宝注册/logo.gif" />
</a>
<a href="">
<img src="练习/淘宝注册/reg.gif" >
</a>
<form action="" method="post">
<label for="userid">姓名<label>:
<input type="text" id="userid" name="nameid" value="" /> <br /><br />
登录名:<input type="text" id="landid" name="landid" value="" /> (可至少包含a-z、0-9和下划线)<br /><br />
密码:<input type="password" placeholder=""/> (至少包含6个字符) <br /><br />
确认密码:<input type="password" placeholder=""/> <br /><br />
性别:<input type="radio" id="sex01" name="sex" value="男" checked="checked"/>
<a> <img src="练习/淘宝注册/Male.gif" > </a>
<label for="sex01">男</label>
<input type="radio" id="sex02" name="sex" value="女"/>
<a> <img src="练习/淘宝注册/Female.gif" > </a>
<label for="sex02">女</label>
<br />
<br />
爱 好:<input type="checkbox" name="hobby"value="sport"/>运动
<input type="checkbox" name="hobby" value="chat"/> 聊天
<input type="checkbox" name="hobby" value="game" /> 打游戏
<br />
<br />
职业:<select>
<option value ="programmer" selected="selected">程序员</option>
<option value="student">学生</option>
<option value="individual">个体</option>
</select>
<br />
<a>
<img src="练习/淘宝注册/edit.jpg" >
</a>
阅读淘宝网服务协议:<textarea rows="6" cols="80" readonly="readonly" >欢迎阅读服务条款协议,本协议阐述之条款和条件适用于您使用taobao.com网站的各种工具和服务.
本服务协议双方为淘宝与淘宝用户,本服务协议具有合同效力.
淘宝的权利和义务
1.淘宝有义务在现有技术上维护整个网上交易平台的正常运行,并且努力提升和改进技术,核实用户网上交易活动的顺利.
2.
</textarea>
<br />
<br />
<input type="checkbox" name="agree" id="agree" value="agree" />
<label for="agree">已阅读条款</label>
<br />
<br />
<input type="reset" name="refresh" id="refresh" value="重填" />
<input type="submit" name="pass" id="pass" value="提交注册信息" />
</form>
</body>
运行结果:
练习三:注册表单
练习目标:
代码实现:
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body >
<table align="center" height="300" cellspacing="0" width="500">
<tr bgcolor="#2493FF" align="center">
<td>
欢迎注册
</td>
</tr>
<tr bgcolor="#B4DAFF" align="center">
<td>
<form >
<label for="userid">用户名<label>:
<input type="text" id="userid" name="nameid" value="" />
</form>
</td>
</tr>
<tr bgcolor="#B4DAFF" align="center">
<td>
<form>
密 码:<input type="password" />
</form>
</td>
</tr>
<tr bgcolor="#B4DAFF" align="center">
<td>
<form>
性 别:<input type="radio" id="sex01" name="sex" value="男" />
<label for="sex01">男</label>
<input type="radio" id="sex02" name="sex" value="女"/>
<label for="sex02">女</label>
</form>
</td>
</tr>
<tr bgcolor="#B4DAFF" align="center">
<td>
<form>
电 话:<input type="text" id="phone" name="phone" value="" />
</form>
</td>
</tr>
<tr bgcolor="#B4DAFF" align="center">
<td>
<form>
职 业:<select name="">
<option selected="selected" value="0">请选择</option>
<option value="student">学生</option>
<option value="individual">个体</option>
<option value="white collar">白领</option>
</select>
</form>
</td>
</tr>
<tr bgcolor="#B4DAFF" align="center">
<td>
<form>
爱 好:<input type="checkbox" name="hobby"value="01"/>敲代码
<input type="checkbox" name="hobby" value="game" /> 打游戏
<input type="checkbox" name="hobby" value="singing"/> 唱歌
<input type="checkbox" name="hobby" value="sport"/> 运动
</form>
</td>
</tr>
<tr bgcolor="#B4DAFF" valign="middle" align="center">
<td> <form action="" method="post">
地 址:<textarea name="textarea" rows="3" cols="35" value="">
</textarea>
</form>
</td>
</tr>
<tr bgcolor="#2493FF" align="center">
<td>填写完成后点击下面提交按钮提交表单 </td>
</tr>
<tr>
<td bgcolor="#B4DAFF" align="center">
<input type="submit" value=" 提交 ">
<input type="reset" value=" 重置 ">
</td>
</tr>
</table>
</body>
</html>
运行结果:
879
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
