<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>练习Html5表单</title>
</head>
<body>
<!-- 表单，一般是以<form> -->
<h2>用户登录</h2>
<form action="#" method="get" id="form1" name="form1">
<p>用户名：<input name="user" id="user" type="text"/></p>
<p>密 码：<input name="password" id="password" type="text" /></p>
<p><input type="submit" value="登录"/></p>
</form>
<!-- 组织表单结构，fieldset -->
<h1>网站小调查</h1>
<form action="#" class="form1">
<fieldset class="fld1">
<legend>个人信息</legend>
<p><label for="name">姓名</label><input id="name"></p>
<p><label for="address">地址</label><input id="address"></p>
<p><laber for="sex">性别</laber>
<select id="sex">
<option value="female">女</option>
<option value="male">男</option>
</select>
</p>
</fieldset>
<hr>
<fieldset class="fld2">
<legend>其他信息</legend>
<p><fieldset>
<legend>你喜欢什么运动？</legend>
<label for="football">
<input id="football" name="yundong" type="checkbox">足球</label>
<label for="basketball">
<input id="basketball" name="yundong" type="checkbox">篮球</label>
<label for="ping">
<input id="ping" name="yundong" type="checkbox">兵乓球</label>
</fieldset></p>
<p><fieldset>
<legend>写下你的建议？</legend>
<label for="comments">
<textarea id="comments" rows="7" cols="25"></textarea></label>
</fieldset></p>
</fieldset>
<input value="提交个人信息" type="submit">
</form>
<!-- 表单控件 -->
<form action="#">
<fieldset>
<legend>输入型文本框</legend>
<label for="email">email</label>
<input type="email" name="email" id="email" />
<label for="url">url</label>
<input type="url" name="url" id="url" />
<label for="number">number</label>
<input type="number" name="number" id="number" step="3" />
<label for="tel">tel</label>
<input type="tel" name="tel" id="tel" />
<label for="search">search</label>
<input type="search" name="search" id="search" />
<label for="range">range</label>
<input type="range" name="range" id="range" value="100" min="0" max="300" />
<label for="color">color</label>
<input type="color" name="color" id="color"/>
</fieldset>
<fieldset>
<legend>日期时间型文本框</legend>
<label for="time">time</label>
<input type="time" name="time" id="time"/>
<label for="date">date</label>
<input type="date" name="date" id="time" />
<label for="month">month</label>
<input type="month" name="month" id="month" />
<label for="week">week</label>
<input type="week" name="week" id="week" />
<label for="datetime">datetime</label>
<input type="datetime" name="datetime" id="datetime" />
<label for="datetime-local">datetime-local</label>
<input type="datetime-local" name="datetime-local" id="datetime-local" />
</fieldset>
<input type="submit" value="提交" />
</form>
<!-- 密码框 -->
<form>
<fieldset>
<p class="row"><label for="name">name</label>
<input type="text" id="name" name="name"></p>
<p class="row"><label for="email">email</label>
<input type="email" id="email" name="email" placeholder="name@qq.com" /></p>
<p class="row"><label for="password">password</label>
<input type="password" id="password" name="password" /></p>
<p class="row"><label for="password2">password2</label>
<input type="password" id="password2" name="password2" />
</fieldset>
<input type="submit" value="提交" />
</form>
<!-- 文本区域 -->
<div class="feedback">
<h1>反馈表</h1>
<div class="content">
<form method="post" action="">
<fieldset class="base_info">
<legend>用户信息</legend>
<label for="username">name</label>
<input type="text" value="" id="username" />
<label for="email">email</label>
<input type="email" value="" id="email" />
</fieldset>
<fieldset class="feedback_content">
<legend>反馈信息</legend>
<label for="msg">具体内容</label>
<textarea rows="8" cols="50" id="msg" placeholder="请详实填写"></textarea>
<label for="up_file">附件</label>
<input type="file" id="up_file"/>
</fieldset>
<button type="submit">提交</button>
<button typr="reset">重置</button>
</form>
</div>
</div>
<!-- 单选按钮与复选框 -->
<h2>会员登录</h2>
<form action="#" method="get" id="form1" name="form1">
<p>会员：<input name="user" id="user" type="text" /></p>
<p>密码：<input name="password" id="password" type="text" /></p>
<fieldset>
<legend>类型</legend>
<label><input type="radio" name="grade" value="1" checked="checked"/>
普通会员</label>
<label><input type="radio" name="grade" value="2"/>VIP</label>
<label><input type="radio" name="grade" value="3"/>管理员</label>
</fieldset>
<p><input type="submit" value="登录"/></p>
</form>
<form>
<p>学院ID：<input type="text" value="" /></p>
<fieldset>
<legend>选学技术</legend>
<label><input name="web" type="checkbox" value="html"/>HTML5</label>
<label><input name="web" type="checkbox" value="CSS"/>CSS3</label>
<label><input name="web" type="checkbox" value="js"/>JS</label>
</fieldset>
<p><input type="submit" value="提交"/></p>
</form>
<!-- 选择框 -->
<form>
<p>姓名：<input type="text" value=""/></p>
<p>所在城市：
<select name="city">
<optgroup label="河北省">
<option value="邯郸市">邯郸</option>
<option value="石家庄" selected="selected">石家庄</option>
</optgroup>
<optgroup label="山西省">
<option value="太原">太原</option>
<option value="榆次">榆次</option>
</optgroup>
</select></p>
<p><input type="submit" value="提交"/></p>
</form>
<!-- 文件域与隐藏域 -->
<form action="/file/upload" method="post" enctype="multipart/form-data">
<h2>上传文件</h2>
<input type="file" name="file" />
<input type="hidden" name="star" value="2">
<button type="submit">上传</button>
</form>
<!-- 按钮 -->
<p><input type="button" value="按钮">
<button type="button">按钮</button></p>
<p><input type="submit" value="按钮">
<button type="submit">提交按钮</button></p>
<p><input type="reset" value="按钮">
<button type="reset">重置按钮</button></p>
<!-- 数据列表 -->
<p>请输入网址：<input type="url" list="url_list" name="weblink"/>
<datalist id="url_list">
<option label="新浪" value="http://www.sina.com.cn"/>
<option label="百度" value="http://www.baidu.com"/>
</datalist>
<input type="submit" value="提交"></p>
<!-- 输出结果 -->
<script type="text/javascript">
function multi(){
a=parseInt(prompt("请输入第一个数字。",0));
b=parseInt(prompt("请输入第二个数字。",0));
document.forms["form"]["result"].value=a*b;
}
</script>
<body onload="multi()">
<form action="restform.asp" method="get" name="form">
结果是：<output name="result"></output>
</form>
<!-- 必填 -->
<form action="testform.asp" method="get">
请输入名称：<input type="text" name="user_name" required="required"/>
<input type="submit" value="提交">
</form>
<!-- 多选 -->
<form action="textform.asp" method="get">请选择要上传的文件：
<input type="file" name="img" multiple/>
</form>
<!-- 匹配模式 -->
<form action="/testform.asp" method="get">邮编：
<input type="text" name="zip_code" pattern="[0-9]{6}" title="6">
<input type="submit" value="提交"></form>
</body>
</html>
6053
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
