表单的简单训练
form用于定义用户输入的表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form name="form1" method="get" action="index.html">
<p>名字 <input type="text" name="fname" id="fname" value="" class="inout" /></p>
<p>
密码
<input type="password" class="inout" id="pass" />
</p>
<p>
<input type="submit" name="Botton" value="提交" />
<input type="reset" name="Reset" value="重填" />
</p>
</form>
</body>
</html>
可以调节框的大小;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>密码框</title>
</head>
<body>
<form method="post" action="">
<p>用户名
<input name="name" type="text" size="21"/>
</p>
<p>
密 码
<input name="pass" type="password" size="21" />
</p>
</form>
</body>
</html>
单选按钮 radio
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单选按钮</title>
</head>
<body>
<form method="post" action="">
性别:
<input name="gen" type="radio" class="input" value="男"/>男
<input name="gen" type="radio" value="女" class="checked">女
</form>
</body>
</html>
可以实现多选按钮 checkbox
下拉列表框;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单选按钮</title>
</head>
<body>
<form method="post" action="">
性别:
<input name="gen" type="radio" class="input" value="男" />男
<input name="gen" type="radio" value="女" class="checked">女
<input name="gen" type="radio" value="女" class="checked">不难不女
<br/> 爱好：
<input type="checkbox" name="interest" values="sport" checked />运动
<input type="checkbox" name="interest" values="talk" class="checked" /> 聊天
<input type="checkbox" name="interest" value="play" />玩游戏
<br/>下拉列表框
<input name="byear" value="yyyy" size="4" maxlength="4" /> 年
<select name="bmon">
<option value="0" selected="">选择月份</option>
<option value="1">一月</option>
<option value="2">一月</option>
<option value="3">一月</option>
<option value="4">一月</option>
</select>月
<input name="month" value="dd" size="2" maxlength="2" />日
</form>
</body>
</html>
按钮的实现：
<!DOCTYPE html>
<!--按钮的实现-->
<html>
<head>
<meta charset="UTF-8">
<title>Button</title>
</head>
<body>
<form method="get" action="detail.html" target="_blank">
<p>用户名:<input name="name" type="text"></p>
<p>密码：<input name="pass" type="password"></p>
<p>
<input type="reset" name="butReset" value="reset按钮"/>
<input type="submit" name="butSubmit" value="submit按钮">
<input type="button" name="butButton" value="button按钮">
<input type="image" src="img/hetao.jpg"/>
</p>
</form>
</body>
</html>
文本域 文件域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件域</title>
</head>
<body>
<form method="post" action="" enctype="multipart/form-data" target="_blank">
<h4>填写个人评价</h4>
<p>
<textarea name="notebook" cols="40" rows="6">
</textarea>>
</p>
<p>
<input type="file" /><br/>
<input type="submit" name="upload" value="上传" />
</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" method="post" target="_blank">
<p>
邮箱
<input type="email" name="email" /><br/> 网址
<input type="url" name="useurl" /><br/> 递增
<input type="number" name="number" min="0" max=100 step="10" /><br/> 滑块(输入数字)
<input type="range" name="range1" min="0" max="10" step="2" />
</p>
<p>
请输入搜素关键词：
<input type="search" name="sousuo" />
<input type="submit" value="Go" />
</p>
<input type="submit" />
<input type="submit" /><br/>
</form>
</body>
</html>
hidden用法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隐藏域</title>
</head>
<body>
<form action="" method="get">
<p> 用户名:<input name="name" type="text"></p>
<p>密码：<input name="pass" type="password"</p>
<p><input type="submit" value="提交"</p>
<p><input type="hidden" value="666"name="serid"</p>
</body>
</form>
</html>
只读与禁用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>只读与禁用</title>
</head>
<body>
<form action="" method="get">
<p> 用户名:<input name="name" type="text" value="张三" readonly="readonly" /></p>
<p>密码:<input name="pass" type="password" r/> </p>
<p><input type="submit" value="修改" disabled="disabled" /r</p>
</form>
</body>
</html>
标签：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
请选择性别
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
</form>
</body>
</html>
placeholder:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<p>
输入搜索的关键词：
<input type="search" name="souosuo" placeholder="请输入需要的关键字" />
<input type="submit" value="Go" />
</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" method="post">
<p>
用户名*:
<input type="text" name="username" required="" />必填
<input type="submit" value="提交" />
</p>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" method="post">
<p>
电话号码：
<input type="text" name="tel" required pattern="^1[358]\d{9}" /> *以13、15、18开头的11位数字<br/>
<input type="submit" value="提交" />
</p>
</form>
</body>
</html>
浙公网安备 33010602011771号