表格基本不使用了，用列表来代替，表格缓存太慢，列表是一列一列缓冲的
![图片[1] - 表格，表单（单选框，复选框，下拉菜单） - MaxSSL](https://www.maxssl.com/uploads/?url=https://img2022.cnblogs.com/blog/2996822/202210/2996822-20221026091435504-96225696.png)
![图片[2] - 表格，表单（单选框，复选框，下拉菜单） - MaxSSL](https://www.maxssl.com/uploads/?url=https://img2022.cnblogs.com/blog/2996822/202210/2996822-20221027074030917-659099827.png)
![图片[3] - 表格，表单（单选框，复选框，下拉菜单） - MaxSSL](https://www.maxssl.com/uploads/?url=https://img2022.cnblogs.com/blog/2996822/202210/2996822-20221027133432034-378501257.png)
![图片[4] - 表格，表单（单选框，复选框，下拉菜单） - MaxSSL](https://www.maxssl.com/uploads/?url=https://img2022.cnblogs.com/blog/2996822/202210/2996822-20221027074301886-1374574049.png)
密码里将默认的type类型test换成password（密码），可以隐藏输入的密码
![图片[5] - 表格，表单（单选框，复选框，下拉菜单） - MaxSSL](https://www.maxssl.com/uploads/?url=https://img2022.cnblogs.com/blog/2996822/202210/2996822-20221027103650287-1970248447.png)
单选框
type更改后，默认的框发生变化，radio是小圆圈，如上图，两个radio之间如果没有联系的话不能实现单选，就是可以同时选，为了满足单选需要将他们联系起来
![图片[6] - 表格，表单（单选框，复选框，下拉菜单） - MaxSSL](https://www.maxssl.com/uploads/?url=https://img2022.cnblogs.com/blog/2996822/202210/2996822-20221027103939741-1254345376.png)
用相同的name将他们连接起来，即可实现单选
![图片[7] - 表格，表单（单选框，复选框，下拉菜单） - MaxSSL](https://www.maxssl.com/uploads/?url=https://img2022.cnblogs.com/blog/2996822/202210/2996822-20221027104016587-1976329294.png)
为了优化用户体验，给用户一个默认的选项，设置checked
![图片[8] - 表格，表单（单选框，复选框，下拉菜单） - MaxSSL](https://www.maxssl.com/uploads/?url=https://img2022.cnblogs.com/blog/2996822/202210/2996822-20221027104232667-2083288804.png)
即打开网页默认勾选男性
为了优化用户体验，将选择范围扩大，即按男或者圆圈或者冒号均可以实现选择
![图片[9] - 表格，表单（单选框，复选框，下拉菜单） - MaxSSL](https://www.maxssl.com/uploads/?url=https://img2022.cnblogs.com/blog/2996822/202210/2996822-20221027105005606-1185394350.png)
复选框
![图片[10] - 表格，表单（单选框，复选框，下拉菜单） - MaxSSL](https://www.maxssl.com/uploads/?url=https://img2022.cnblogs.com/blog/2996822/202210/2996822-20221027110002053-262340795.png)
type用checkbox即可实现多选框的设置，同时也可以添加checked来默认选择
提交按钮（可以按动的按钮）
![图片[11] - 表格，表单（单选框，复选框，下拉菜单） - MaxSSL](https://www.maxssl.com/uploads/?url=https://img2022.cnblogs.com/blog/2996822/202210/2996822-20221027110208488-912837459.png)
浏览器展示效果
![图片[12] - 表格，表单（单选框，复选框，下拉菜单） - MaxSSL](https://www.maxssl.com/uploads/?url=https://img2022.cnblogs.com/blog/2996822/202210/2996822-20221027110303518-1616492403.png)
下拉菜单
![图片[13] - 表格，表单（单选框，复选框，下拉菜单） - MaxSSL](https://www.maxssl.com/uploads/?url=https://img2022.cnblogs.com/blog/2996822/202210/2996822-20221027131207898-722086929.png)
![图片[14] - 表格，表单（单选框，复选框，下拉菜单） - MaxSSL](https://www.maxssl.com/uploads/?url=https://img2022.cnblogs.com/blog/2996822/202210/2996822-20221027131249274-336617905.png)
![图片[15] - 表格，表单（单选框，复选框，下拉菜单） - MaxSSL](https://www.maxssl.com/uploads/?url=https://img2022.cnblogs.com/blog/2996822/202210/2996822-20221027131314406-158110321.png)
![图片[16] - 表格，表单（单选框，复选框，下拉菜单） - MaxSSL](https://www.maxssl.com/uploads/?url=https://img2022.cnblogs.com/blog/2996822/202210/2996822-20221027134559269-132854030.png)
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
