1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta charset = "utf-8" /> 5 <meta name="Keywords" content="" /> 6 <mata name = "description" content = "" /> 7 <title>03_复习随敲_0111</title> 8 <style> 9 *{margin: 0;padding: 0;} 10 h1{text-align: center;color: red;} 11 ol{margin: 0 0 0 30px} 12 .zd{color: red;font-size: 20} 13 </style> 14 </head> 15 <body> 16 <h1>03_复习笔记_0111</h1> 17 <hr color="blue" size="5" /> 18 19 <h2>主要内容</h2> 20 <ol type="1"> 21 <li>form表单</li> 22 <li>label元素</li> 23 <li>textarea元素</li> 24 <li>input元素</li> 25 <li>表格元素</li> 26 <li>frameset框架</li> 27 </ol> 28 <hr color="blue" size="5" /> 29 30 <h2>1.form表单</h2> 31 <ol type="A"> 32 <li>格式</li> 33 <ul> 34 <li class="zd"><form action=""><br /> 35 表单域<br /> 36 </form></li> 37 </ul> 38 <hr /> 39 40 <li>属性</li> 41 <ul> 42 <li>action: 收集到的数据提交到哪个页面 --> # 表示当前页面</li> 43 <li> 44 method：提交数据的方式 --> GET 显示提交，请求快，URL地址有长度限制、POST 隐式提交 45 </li> 46 </ul> 47 <hr /> 48 49 <li>效果展示</li> 50 <form action="#" method="GET"> 51 性别： 52 <input type="radio" name="gender" value="男" />男 53 <input type="radio" name="gender" value="女" />女 54 <br /> 55 提交：<input type="submit" name="submit" value="Yes"> 56 </form> 57 </ol> 58 <hr color="blue" size="5" /> 59 60 <h2>2.label标签</h2> 61 <ol type="A"> 62 <li>功能</li> 63 <ul> 64 <li> 65 可以将两个标签链接起来，如：将男和男前面的radio元素关联起来，点击男就相当于点击了男前面的radio按钮<br /> 66 利用id来实现关联 67 </li> 68 </ul> 69 <hr /> 70 71 <li>格式</li> 72 <ul> 73 <li class="zd"><input type="radio" name="gender" id="男" /> <label for="男">男</label> </li> 74 </ul> 75 <hr /> 76 77 <li>效果</li> 78 <ul> 79 <form action="#"> 80 性别： 81 <input type="radio" name="gender" id="男" /> <label for="男">男</label> 82 <input type="radio" name="gender" id="女" /> <label for="女">女</label> 83 </form> 84 </ul> 85 </ol> 86 <hr color="blue" size="5" /> 87 88 <h2>3.多行文本输入框标签 --> textarea标签</h2> 89 <ol type="A"> 90 <li>格式</li> 91 <ul> 92 <li class="zd"> 93 <textarea name="个人介绍" id="" cols="30" rows="10"></textarea> 94 </li> 95 </ul> 96 <hr /> 97 98 <li>属性</li> 99 <ul> 100 <li>name：元素名字</li> 101 <li>id：类似于身份证号码，不能有重复值</li> 102 <li>cols：文本框的列数</li> 103 <li>rows：文本框的行数</li> 104 </ul> 105 <hr /> 106 107 <li>效果展示</li> 108 <ul> 109 <li> 110 <textarea name="个人介绍" id="" cols="30" rows="10"></textarea> 111 </li> 112 </ul> 113 </ol> 114 <hr color="blue" size="5" /> 115 116 <h2>4.input元素</h2> 117 <ol type="A"> 118 <li>input实现按钮</li> 119 <ol type="a"> 120 <li>格式</li> 121 <ul> 122 <li class="zd"><input type="button" name="" value="按钮"></li> 123 </ul> 124 <li>效果展示</li> 125 <ul> 126 <li> 127 <input type="button" name="" value="按钮"> 128 </li> 129 </ul> 130 </ol> 131 <hr /> 132 133 <li>input实现隐藏域</li> 134 <ol type="a"> 135 <li>格式</li> 136 <ul> 137 <li class="zd"> 138 <input type="hidden" name="hidden" value="我是被隐藏的数据"> 139 </li> 140 </ul> 141 <li>实现效果</li> 142 <ul> 143 <li><input type="hidden" name="hidden" value="我是被隐藏的数据"></li> 144 <li>没有效果，但是如果将其进行提交就知道啦</li> 145 <li class="zd">注意：隐藏域和提交都必须位于同一个表单域时才能提交成功</li> 146 </ul> 147 </ol> 148 <hr /> 149 150 <li>input实现文件打开</li> 151 <ol type="a"> 152 <li>格式</li> 153 <ul> 154 <li class="zd"><input type="file" name="文件" /></li> 155 </ul> 156 <li>实现效果</li> 157 <ul> 158 <li> 159 <form action="#"> 160 <input type="file" name="文件" /> 161 <input type="submit" name="" /> 162 </form> 163 </li> 164 </ul> 165 </ol> 166 <hr /> 167 168 <li>input实现重置按钮</li> 169 <ol type="a"> 170 <li>格式</li> 171 <ul> 172 <li class="zd"><input type="reset" name="reset" value="重置" /></li> 173 </ul> 174 <li>实现效果</li> 175 <ul> 176 <li> 177 <form action=""> 178 用户名：<input type="text" name="username" placeholder="请输入用户名" /> 179 <input type="reset" name="reset" value="重置" /><br /> 180 <input type="submit"> 181 </form> 182 </li> 183 </ul> 184 </ol> 185 <hr /> 186 187 <li>input实现滑块</li> 188 <ol type="a"> 189 <li>格式</li> 190 <ul> 191 <li class="zd"><input type="range" style="300px" name=""<</li> 192 </ul> 193 <li>实现效果</li> 194 <ul> 195 <li> 196 <input type="range" style="300px" name=""> 197 </li> 198 </ul> 199 </ol> 200 <hr /> 201 202 <li>注意：input元素要放在form表单域中</li> 203 </ol> 204 <hr color="blue" size="5" /> 205 206 <h2>5.表格元素</h2> 207 <ol type="A"> 208 <li>格式</li> 209 <ul> 210 <li class="zd">见源代码</li> 211 </ul> 212 <hr /> 213 214 <li>实现效果</li> 215 <ul> 216 <li> 217 <table border="1"> 218 <thead> 219 <tr> 220 <td colspan="3">学生信息</td> 221 </tr> 222 </thead> 223 <tbody> 224 <tr> 225 <td>学号</td> 226 <td>姓名</td> 227 <td>爱好</td> 228 </tr> 229 <tr> 230 <td>2012114018</td> 231 <td>王杨帅</td> 232 <td>basketball</td> 233 </tr> 234 <tr> 235 <td>21116092312</td> 236 <td>杨帅王</td> 237 <td>programming</td> 238 </tr> 239 </tbody> 240 241 </table> 242 </li> 243 </ul> 244 <hr /> 245 246 <li>注意：详细笔记见 03_课堂随敲03_表格</li> 247 </ol> 248 <hr color="blue" size="5" /> 249 250 <h2>6.frameset框架</h2> 251 <ol type=""A> 252 <li>见单独的frame文件</li> 253 254 </ol> 255 256 </body> 257 </html>