webIDE表单标签以及包含选择器的使用

时间:2024-01-26 15:36:52
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <!-- 奥卡姆剃刀原则:如非必要 勿增实体 --> <body> <!-- action属性 表示填写信息提交的服务器处理函数 --> <!-- get 会将信息明文的形式拼接在url后面 --> <!-- post 会将的信息保存在request包中,通过浏览器提交 --> <!-- get和post的区别 --> <!-- 1.安全性上的不同 get会拼在url上所以 安全性不高 post实在request包体中--> <!-- 2.参数位置上的不同 get在url中写参数 post在request --> <!-- 3.参数长度的不同 get会因为浏览器的限制而有可能不能完整的传递参数 post无此顾虑--> <!-- 4.缓存方式不同 get会保存在浏览器的历史记录中 post不会--> <!-- enctype urlencoded会使用url编码方式将表单信息进行编码--> <!-- form-data一般用来上传文件时使用 它使用二进制的数·据流传递信息 --> <!-- text/plain 使用明文--> <form action="#" method="get" enctype="text/plain"> <!-- input标签 使用交信息的标签 可在各种类型的input标签传递各种类型数据 --> <!-- type属性决定了标签的形式 --> <!-- name属性决定了提交表单信息时键值对键的名字 如果没有name input标签将成为摆设 不具备数据提交的能力--> <!-- size可以用来设置 标签的宽度 --> <!-- maxlenth可以设置字符的数量 --> <!-- checked 可以让单选/复选默认选中 --> <!-- readonly 只读属性 用户无法修改 --> <!-- disable 失效 用户无法修改的同时 标签也是失效了 不再进行上传 --> <!-- placehoder属性 可以用来预制一些提示信息 --> <!-- autofocus属性 可以自动聚焦到某个标签--> 用户名:<input type="text" name="username" maxlength="6" placeholder="请输入你的用户名"> <br> <!-- password用于输入密码 --> 密 码:<input type="password" name="password" value="11111"/><br> <!-- checkbox多选框 --> 爱 好:<input type="checkbox" name="fav" value="bk" checked>篮球 <input type="checkbox" name="fav" value="sing" checked><input type="checkbox" name="fav" value="jump" checked><input type="checkbox" name="fav" value="rap" checked>Rap <br> <!-- radio是单选框 使用name属性将多个radio进行关联 --> 性 别:<input type="radio" name="sex" value=""><input type="radio" name="sex" value=""><input type="radio" name="sex" value="跨性别" checked>跨性别 <br> <!-- email是一个输入框 会进行内容的检测 只有你输入内容符合邮箱的格式 提交时才不会报错 --> 邮 箱:<input type="email" name="email" autofocus/> <!-- submit 提交按钮 点击时会将表单中所有的信息提交到action指定的服务数据处理接口 --> <input type="submit"> <!-- button同submit --> <button>上传</button> <!-- file 类型 用于上传文件--> <input type="file" name="avarta"> <div style="width: 100px;height: 100px;"></div> <!-- reset类型 是重置按钮 一旦点击 之前录入用户信息全部清空 --> <input type="reset" > <!-- image类型是图片按钮 可以设置开发者想要的或者更优化按钮效果 本质上还是提交按钮 --> <input type="image" name="avarta" src="img/button.jpg" width="250px" height="100px"> <!-- hidden隐藏域 一些无需用户键入信息可以自动获取的信息,可以使用hidden类型来上传--> <input type="hidden" name="location" value="西安"> <!-- h5推出的新标签 --> <!-- 颜色选择器 --> <input type="color"> <!-- 日期选择器 --> <input type="date"> <!-- 时期时间选择器 --> <input type="datetime-local"> <!-- 时间 --> <input type="time" name="" id=""> <!-- url输入框 规则是必须在起始部分写入https://--> <input type="url"> <!-- 范围选择 --> <input type="range" max="100" min="20"> </form> </body> </html>