表单 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设为一样实现分组。