表单的简单训练
form用于定义用户输入的表单
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
可以调节框的大小;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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
下拉列表框;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
按钮的实现:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
文本域 文件域
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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用法
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
只读与禁用
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
标签:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>