1.表单标签:概念:用于采集用户输入的数据,用户服务器进行交互form标签:form/form属性:action:提交的路径地址method:提交的方式(get,post)get和post的区别:(1)get提交将数据加在地址栏的后面,post提交将数据封 ...
1.表单标签: 概念:用于采集用户输入的数据,用户服务器进行交互 form标签:<form></form> 属性: action:提交的路径地址 method:提交的方式(get,post) get和post的区别: (1)get提交将数据加在地址栏的后面,post提交将数据封装在请求体中 (2)get提交相对不安全;post提交相对安全 (3)get提交有大小限制,根据浏览器不同而不同;post不限制大小 2.input标签:<input /> type属性:根据type属性实现各种不同功能的表单项; text:普通的文本输入框; name:username value="张三"设置默认值 password:密码输入框;特点是显示的是掩码 radio:单选按钮 name:如果想让一组单选按钮互斥,就用指定同样的name属性值,需要加value属性值; checked:默认被选中; checkbox:复选框; name:组的概念,需要加value属性值。 checked:默认被选中; file:上传文件的控件 button:普通按钮,没有任何内置的功能; submit:内置功能,点击会按照action地址提交 reset:重置,点击会清空之前填写的内容 image:图片按钮,功能类似与submit src:加载图片 alt:图片的提示文字 hidden:隐藏表单,作用是在提交数据的时候,服务器需要这个数据,但是不需要用户看到。 注意:name属性必须要写。 3、select标签(<select></select>):下拉菜单 属性: name;表单项的名称 option标签:可选项(下拉菜单之间的级联) value,表单项的值 selected:默认被选中 4、textarea:文本域标签 属性: cols:列数 rows:行数 注意:默认的文本值在标签体当中 例子: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <!-- 设计一个表单,进行用户注册 信息有: 账号(文本框) 密码(密码框) 学历:大专,本科,研究生单选 选修科目:JAVA,PYTHON,ANDROID,C++多选 所在学校:下拉框,北大,清华,复旦,交大,中科大 备注:文本域,列30,20 有图片按钮和重置按钮 --> <body> <form name="studnet" action="#" method="get"> <table > <tr> <td> 账号 </td> <td> <input type="text" name="username" value=""/> </td> </tr> <tr> <td> 密码 </td> <td> <input type="password" name="pwd" value="" /> </td> </tr> <tr> <td> 学历 </td> <td> <input type="radio" name="xueli" value="" />大专 <input type="radio" name="xueli" value="" checked="checked"/>本科 <input type="radio" name="xueli" value="" />研究生 </td> </tr> <tr> <td> 选修科目 </td> <td> <input type="checkbox" name="kemu" value="java" />JAVA <input type="checkbox" name="kemu" value="PYTHON" />PYTHON <input type="checkbox" name="kemu" value="ANDROID" />ANDROID <input type="checkbox" name="kemu" value="C++" />C++ </td> </tr> <tr> <td> 所在学校 </td> <td> <select> <option value="beida">北大</option> <option value="qinghua">清华</option> <option value="fudan">复旦</option> <option value="jiaoda">交大</option> <option value="guangcai">广财</option> </select> </td> </tr> <tr> <td> 备注 </td> <td> <textarea name="beizhu" cols="30" rows="20" >this is my page!</textarea> </td> </tr> <tr> <td></td> <td> <input type="reset" value="重置" /> </td> </tr> <tr> <td></td> <td> <input type="image" src="../images/btn.gif" alt="图片提示词"/> </td> </tr> </table> </form> </body> </html> |