表单 form:标签、类型、注意事项
表单
示例代码:
<!--form:
提交方式分为get提交和post提交,默认为get提交;
get提交:在路径后面加参数 ?name=123&age=456
*键名和键值要完全匹配,注意键名的空格和键值的引号。
post提交:在请求信息里加参数,能接收到但是(路径中)看不到
如果有file类型,需要有enctype属性
-->
<form action="../0309/jianliye.html" method="get" enctype="multipart/form-data">
<!--表单的通用写法-->
<!--
placeholder="123" 输入框默认文本为123,可修改
readonly(与placeholder配合) 只读
disabled(与placeholder配合) 不可操作 -->
<input type="text" placeholder="123" readonly disabled /><br/>
<!--隐藏域:不显示且不占位,可传参-->
<input type="hidden" />
<!--单选按钮:
通过相同的name值设置分组实现单选的效果;
checked:默认选中
label:将文字与按钮标签相关联,实现点击文字选中选择按钮的效果 -->
<!--label方法一:-->
<label><input type="radio" name="sex" value="1" checked />男</label><br/>
<!--label方法二:-->
<input id="nv" type="radio" name="sex" value="0" /><label for="nv">女</label><br/>
<!--多选按钮:
通过相同的name值设置分组,分组的作用是传参时对参数分组;
checked:默认选中
label:将文字与按钮标签相关联,实现点击文字选中选择按钮的效果
-->
<label><input type="checkbox" name="ah" value="music" checked />听歌</label><br/>
<input id="pgame" type="checkbox" name="ah" value="game" /><label for="pgame">打游戏</label><br/>
<input type="checkbox" name="ah" value="it" />敲代码<br/>
<!--表单的特殊元素-->
<!--多行文本:name=内容,默认显示123-->
<textarea name="add" cols="30" rows="10" placeholder="123" >
北京东城 显示手敲的 空格
</textarea>
<!--下拉:
option有value时:name=value
option没有value时:name=内容
selected:默认选中,是option的属性
multiple:默认展示条数,与size配合使用,是select的属性 -->
<select multiple size="4">
<option value="1">小明</option> <!--name=1-->
<option>小龙</option> <!--name=小龙-->
<option value="2">小红</option> <!--name=2-->
<option value="3" selected>小明明</option>
<option value="5">小龙明</option>
<option value="5">小红明</option>
</select>
</form>
注意事项:
在表单中name与value是键值对,如果需要传值,必须要有name和value(input);
在单选和多选中name有分组的作用:通过将name设为一样实现分组。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥