表单进阶单选框多选框

1.单选框

<input type="radio" name="aaa" id="man">
<label for="man">男</label>
name 组名
相同组名只能选一个

label 设置for="" 与id="" 相同  可以点击文字选择

<input type="radio" name="aaa" checked="checked">
checked 默认选择

2.多选框

<input type="checkbox" name="" id="man">
<label for="man">男</label>
label 设置for="" 与id="" 相同  可以点击文字选择

checked="checked"
默认选择，多选框中可以多设置几个默认选择

补充

input[type=checkbox]{appearance: none;width: 20px;height: 20px;border: 1px solid black;
}
选择框标签受默认样式限制不能随意更改，需要先将样式清除
appearance: none;
再进行更改

3.上传文件和隐藏字段，只读禁用

<input type="file" name="" id="">
上传文件
<form action=""><!--上传地址 -->
<input type="image"src="">
</form>
图片按钮-代替提交按钮<input type="submit">

隐藏按钮
<input type="hidden" name="" id="" value="带给后端个人信息">

禁用，只读
<button disabled="disabled">注册</button>
<input type="radio" disabled>不满意
<input type="text" readonly>
disabled不能选择 禁用
readonly只读 不能修改

4.下拉菜单

 <div>地址</div><!-- select支持的属性1.size  显示几个选项2.multiple   多选 按CTRL shift多选
--><!-- option 支持属性1.value, 提供给后端需要的value值2.selected，默认选中
--><select size="1"><option value="">辽宁</option><option value="">山东</option><option value="">山西</option><option value="">北京</option><option value="" selected>河南</option></select><div><select  multiple ><option value="">凳子</option><option value="" selected>桌子</option><option value="" selected>电脑</option><option value="" selected>椅子</option></div>

5.多行文本输入框-文本域

.aa{width: 300px;height: 300px;resize:none ;/* resize  重新设置大小，vertical只能在垂直方向重新设置，horizontal只能在水平方向重新设置,both 默认，可以随意设置大小none 不可以重新设置大小*/}
<div><!-- clos输入几列rows输入几行不常用placeholder提示文字textarea默认value：写在双标签内部，注意空格问题--><textarea name="" id="" cols="30" rows="10"></textarea><br><textarea class="aa" placeholder="请输入你的意见">aaa</textarea></div>

6.字段集 1111

*****语法
<fieldset><legend></legend>
</fieldset>
legend在fieldset的边框添加文字
legend和fieldset可以添加常用属性边框大小背景颜色等等

fieldset{border: 2px solid blue;background-color: aqua;width: 200px;height: 200px;}legend{border: 1px solid;text-align: center;}
<fieldset><legend>性别</legend><input type="radio" name="aa">男<br><input type="radio" name="aa">女</fieldset><fieldset><legend>爱好</legend><input type="checkbox" name="bb">抽烟<br><input type="checkbox" name="bb">喝酒</fieldset>

表单进阶单选框多选框相关推荐

PHP表单登记表，输出复选框的值
//学号:(必填项,表单输入,判断数字,判断数字范围) //姓名:(必填项,表单输入,判断字母或数字) //年级:(必填项,单选下拉菜单) //专业:(必填项,单选下拉菜单) //选修课:(多选按钮) ...
[css] css怎么更改表单的单选框或下拉框的默认样式？
[css] css怎么更改表单的单选框或下拉框的默认样式? 下拉框select可以通过appearance:none去除默认样式,然后进行自定义,但是option标签不能通过CSS自定义,所以最佳方案 ...
php一些单选、复选框的默认选择方法（示例）
转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...
jQuery 单选框/复选框美化
对于前端萌新来说,美化表单是个痛苦的事情,通常都是去寻找插件这种逃避的办法,其实这并不是难事.在上篇文章中提到了兄弟元素选择器在表单美化中表现突出,下面的示例源码将体现基础篇知识的实际应用. 纯CS ...
jQuery获取及设置单选框,多选框,文本框内容
在工作中,text,radio,checkbox,select在开发过程中是必不可少的一部分.在开发过程中经常要处理页面表单元素. Eg: 在复选框checkBox中获取checked的valu ...
JQuery获取选中的元素（单选框复选框）及其他等
看注释 <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...
js 实现多选框(复选框) 和单选框,下拉框功能完整示例代码附效果图
<!DOCTYPE html> <html><head><meta charset="utf-8" /><script src ...
改变单选或者复选框的样式
原理是通过定位把以前的样式覆盖掉,就酱... 代码如下: css.checkbox{position: relative;padding-left: 8px;}.checkbox:before{con ...
layui 表单动态添加、删除input框
html部分 <div class="layui-form-item" ><label class="layui-form-label"> ...
Python3+Selenium3+webdriver学习笔记8（单选、复选框、弹窗处理）
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...

表单进阶单选框多选框

1.单选框

2.多选框

3.上传文件和隐藏字段，只读禁用

4.下拉菜单

5.多行文本输入框-文本域

6.字段集 1111

表单进阶单选框多选框相关推荐

最新文章

热门文章

表单进阶 单选框 多选框

1.单选框

2.多选框

3.上传文件和隐藏字段，只读禁用

4.下拉菜单

5.多行文本输入框-文本域

6.字段集 1111

表单进阶 单选框 多选框相关推荐

最新文章

热门文章

表单进阶单选框多选框

表单进阶单选框多选框相关推荐