1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--解决乱码 ,告诉浏览器文档类型和编码 5 http-equiv:描述当前网页内容类型 6 context:使用的是html的文本 7 charset:使用的编码是UTF-8,解码也使用UTF-8 8 --> 9 <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> 10 <title>Insert title here</title> 11 </head> 12 <body> 13 <!-- 14 form表单标签:要提交的内容,使用该标签包裹 15 action属性:决定表单提交到哪里 16 method属性:决定表单的提交方式get/post get(默认值)/post 17 post和get区别: 18 1.post提交 (http 请求正文中)键值对没有在地址栏上,而get是放在地址栏上 19 2.安全性上post更高一些 20 3.长度上:get因为是放到地址栏中,长度受限,2K. post 理论上是无限的 21 22 input标签:表单项标签 23 type类型: 24 text 文本框 25 password 密码框 26 radio 单选框 27 file 文件上传 28 hidden 隐藏域 29 submit 提交 30 reset 重置 31 image 提交(图片) 32 button 按钮 33 name属性: 34 对于表单项:提交时键值对的键 35 value属性: 36 1.对于需要提交的表单项:提交的值 37 2.按钮类型的:按钮上显示的文字 38 readonly属性: 39 只读属性,只是限制value属性的变化. 40 只能给text和password textarea使用 41 disabled属性: 42 禁用的效果:颜色变化,不参与提交 43 适用范围:所有input标签 44 checked属性: 45 默认被选中. 46 只适用于: 1 radio 2 checkbox 47 maxlength属性:定义最大长度 48 size属性:定义输入框显示长度 49 以上连个属性只能放在text和password中 50 51 select标签: 52 下拉选 53 name属性:提交的键 54 size属性:同时显示的选项个数 55 multiple属性:多选 56 selected属性:让option默认被选中 57 textarea标签: 58 文本域 59 name属性:提交的键 60 col属性:列宽 61 row属性:行高 62 readonly属性:只读 63 64 --> 65 <form action="#" method="post"> 66 <table border="1"> 67 <tr> 68 <th colspan="3">用户注册</th> 69 </tr> 70 <tr> 71 <td>用户名:</td> 72 <td><input type="text" name="name" value="123" maxlength="5"/></td> 73 </tr> 74 <tr> 75 <td>密码:</td> 76 <td><input type="password" name="pwd" disabled /></td> 77 </tr> 78 <tr> 79 <td>性别:</td> 80 <td> 81 女<input type="radio" name="sex" value="0" /> 82 男<input type="radio" name="sex" value="1" checked/> 83 </td> 84 </tr> 85 <tr> 86 <td>爱好</td> 87 <td> 88 抽烟<input type="checkbox" name="habit" vlaue="smoke" /> 89 喝酒<inputtype="checkbox" name="habit" vlaue="drink" /> 90 </td> 91 </tr> 92 <tr> 93 <td>学历:</td> 94 <td> 95 <select name="edu" size="10"> 96 <option value="00">请选择学历</option> 97 <option value="01">高中</option> 98 <option value="02">大专</option> 99 <option value="03">大本</option> 100 <option value="04">硕士</option> 101 </select> 102 </td> 103 </tr> 104 <tr> 105 <td>上传照片:</td> 106 <td><input type="file" name="photo" /></td> 107 </tr> 108 <tr> 109 <td>个人描述:</td> 110 <td><textarea name="desc" cols="50" rows="10">这家伙很懒</textarea></td> 111 </tr> 112 <tr> 113 <td>隐藏域:</td> 114 <td><input type="hidden" name="secret" value="张三" /></td> 115 </tr> 116 <tr> 117 <td>其他:</td> 118 <td><input type="image" /></td> 119 </tr> 120 <tr> 121 <td colspan="2" align="center"><input type="submit" value="提交" /><input 122 type="reset" /></td> 123 </tr> 124 125 </table> 126 </form> 127 </body> 128 </html>
时间: 2024-12-15 01:34:37