from表单的基础控件
1.最简单的的一个注册表单结构
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>表单</title></head><body><form action="b.html" method="POST"><label for="username">账号:</label><inputtype="text"id="username"name="username"placeholder="至少6位"autofocusrequired/><label for="email">邮箱:</label><inputtype="email"id="email"name="email"placeholder="admin@focus.com"required/><label for="pwd1">密码:</label><inputtype="password"id="pwd1"name="pwd1"placeholder="至少输入6位，并且包含字母和数字"required/><label for="pwd2">确认:</label><inputtype="password"id="pwd2"name="pwd2"placeholder="****"required/><button type="submit">提交</button></form></body></html>
2.单选框和复选框
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>单选按钮和复选框</title></head><body><form action="b.html" method="GET"><!-- 单选框 --><label for="male">性别：</label><div><input type="radio" name="gender" id="male" checked /><label for="male">男</label><input type="radio" name="gender" id="female" /><label for="female">女</label><input type="radio" name="gender" id="secret" /><label for="secret">保密</label></div><!-- 复选框 --><label for="">兴趣：</label><div><input type="checkbox" name="hobby[]" id="game" /><label for="game">游戏</label><input type="checkbox" name="hobby[]" id="write" /><label for="write">写字</label><input type="checkbox" name="hobby[]" id="read" checked /><labelfor="read">阅读</label><input type="checkbox" name="hobby[]" id="car" /><label for="car">开车</label></div><button type="submit">提交</button></form></body></html>
3.下拉列表和下拉多选列表
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>下拉选择</title></head><body><form action="b.html" method="GET"><!-- 单选框 --><!-- <label for="edu">学历：</label> --><!-- <div> --><!-- 单选下拉列表 --><!-- <select name="edu" id="edu"><option value="1">小学</option><option value="2">初中</option><option value="3">高中</option><option value="4">专科</option><option value="5" selected>本科</option></select> --><!-- </div> --><!-- 多选列表 --><label for="hobby">兴趣爱好：</label><select name="hobby" id="hobby" size="6" multiple><option value="1">look</option><option value="2">write</option><option value="3" selected>read</option><option value="4">run</option><option value="5" selected>go</option></select><button type="submit">提交</button></form></body></html>
4.文件上传
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>文件上传</title></head><body><!-- post提交 form-data二进制流传输 --><form action="b.html" method="POST" enctype="multipart/form-data"><input type="hidden" name="MAX_FILE_SIZE" value="800" /><input type="file" name="head" id="head" /><label for="head">头像</label><button type="submit">提交</button></form></body></html>
5.文本域
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>文本域</title></head><body><form action="b.html" method="POST"><textareaname="desc"id="desc"cols="30"rows="10"placeholder="请输入..."></textarea><button type="submit">提交</button></form></body></html>
6.控件的 from 属性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>控件的form属性</title></head><body><form id="register"></form><!-- form下的控件 不在from标签区域内，也可以实现from元素的填充 --><input type="text" name="" id="" form="register" /><button form="register" formaction="b.html" formmethod="GET">提交</button></body></html>
7.iframe 案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>iframe案例</title></head><body><header>xx后台</header><aside><a href="http://www.baidu.com" target="show">百度</a><a href="http://www.qq.com" target="show">qq</a><a href="http://www.taobao.com" target="show">taobao</a><a href="http://www.360.com" target="show">360</a></aside><main><iframe src="" name="show" width="600" height="500"></iframe></main></body></html>