dz 一步一步教你做网站,室内设计联盟论坛,wordpress 插件结构,南阳做网站哪个好表单 一、表单1.基础表单2.大小规格3.只读属性4.表单栅格排列5.表单表格式的排列6.水平排列表单7.内联表单 二、验证1.验证2.自定义表单样式 一、表单
1.基础表单
使用.form-check 可以格式化复选框和单选框按钮#xff0c;用以改进它们的默认布局和动作呈现#xff0c;复选… 表单 一、表单1.基础表单2.大小规格3.只读属性4.表单栅格排列5.表单表格式的排列6.水平排列表单7.内联表单 二、验证1.验证2.自定义表单样式 一、表单
1.基础表单
使用.form-check 可以格式化复选框和单选框按钮用以改进它们的默认布局和动作呈现复选框用于在列表中选择一个或多个选项单选框则用于多许多选项中选择一个。
div classrowdiv classcol mt-5form action#div classform-group!-- 放表单组放置一组匹配的表单 --label forusename用户名/labelinput typetext idusename classform-control placeholder请输入用户名small classform-text text-muted用户名需要用英文、符号组成/small/divdiv classform-grouplabel forpassword密码/labelinput typepassword classform-control idpassword placeholder请输入密码/divdiv classform-grouplabel forpasswordAgain确认密码/labelinput typepassword classform-control idpasswordAgain placeholder请再次输入密码 disabled/divdiv classform-grouplabel forarea所在地/labelselect name idarea classform-control!-- multiple:让下拉框变成多选 --option value北京/optionoption value上海/optionoption value广州/optionoption value深圳/option/select/divdiv classform-grouplabel forfile选择文件/labelinput typefile classform-control-file idfile/divdiv classform-grouplabel forrange滑块/labelinput typerange classform-control-range idrange/div!-- 复选框、单选框 --div classform-grouplabel for兴趣爱好/labeldiv classform-check form-check-inline!-- 选择框要放在这个类里面 .form-check-inline是为了让表单在一行中显示 --input typecheckbox ideat classform-check-inputlabel foreat classform-check-label吃饭/label/divdiv classform-check form-check-inlineinput typecheckbox idsleep classform-check-inputlabel forsleep classform-check-label睡觉/label/divdiv classform-check form-check-inlineinput typecheckbox idplay classform-check-inputlabel forplay classform-check-label打豆豆/label/div/divdiv classform-grouplabel for性别/labeldiv classform-check form-check-inlineinput typeradio idmale classform-check-input namesexlabel formale classform-check-label男/label/divdiv classform-check form-check-inlineinput typeradio idfemale classform-check-input namesexlabel forfemale classform-check-label女/label/div/divdiv classform-checkinput typecheckbox classform-check-input idexampleCheck1label classform-check-label forexampleCheck1Check me out/label/divbutton typesubmit classbtn btn-primary提交/button/form/div
/div2.大小规格
使用 .form-control-lg 和 .form-control-sm属性定控件大小高度。
div classrow mt-5div classcoldiv classform-groupinput typetext classform-control form-control-lg placeholder大尺寸的表单/divdiv classform-groupinput typetext classform-control placeholder正常尺寸的表单/divdiv classform-groupinput typetext classform-control form-control-sm placeholder小尺寸的表单/divdiv classform-groupselect name id classform-control col-form-label-lgoption value 大尺寸的下拉框/option/select/divdiv classform-groupselect name id classform-controloption value正常尺寸的下拉框/option/select/divdiv classform-groupselect name id classform-control col-form-label-smoption value小尺寸的下拉框/option/select/div/div
/div3.只读属性
在input控件上增加 readonly 布尔值标签定义以防止修改input中的值。 引用 .form-control-plaintext class样式只显示纯文本
div classrow mt-5div classcolform action#div classform-groupinput typetext classform-control placeholder只读文本 readonly /divdiv classform-groupinput typetext classform-control-plaintext placeholder没有边框的只读文本 readonly /div/form/div
/div4.表单栅格排列
解析
form action# !-- form标签一定要放在行与列的外面 --div classrowdiv classcolinput typetext classform-control placeholder栅格排列/divdiv classcolinput typetext classform-control placeholder栅格排列/div/div
/form应用
form action#div classform-row mt-5div classcol-md-6 form-grouplabel foremail1Email/labelinput typeemail classform-control idemail1 placeholder请输入邮箱账号/divdiv classcol-md-6 form-grouplabel forpasswordPassword/labelinput typepassword2 classform-control idpassword2 placeholder请输入密码/div/divdiv classrowdiv classform-group collabel forhomeAddres家庭地址/labelinput typetext classform-control idhomeAddres placeholder请输入家庭地址/div/divdiv classrowdiv classform-group collabel forcompanyAddres公司地址/labelinput typetext classform-control idcompanyAddres placeholder请输入公司地址/div/divdiv classform-rowdiv classcol-md-6 form-grouplabel forcity城市/labelinput typetext classform-control idcity placeholder请输入您所在的城市/divdiv classcol-md-4 form-grouplabel formarriage婚姻状况/labelselect classform-control idmarriageoption value已婚/optionoption value未婚/option/select/divdiv classcol-md-2 form-grouplabel foreducation学历/labelselect classform-control ideducationoption value博士/optionoption value硕士/optionoption value本科/optionoption value大专/optionoption value高中/option/select/div/divdiv classform-groupdiv classform-checkinput typecheckbox classform-check-input idgridlabel forgrid classform-check-lable同意所读内容/label/div/divbutton typesubmit classbtn btn-primary提交/button
/form5.表单表格式的排列
form action#div classform-row !-- 这个class与row的唯一区别就是间距变小了 --div classcolinput typetext classform-control placeholder栅格排列/divdiv classcolinput typetext classform-control placeholder栅格排列/div/div
/form6.水平排列表单
确保添加.col-form-label 到您label上以便他们垂直居中与他们相关的表单控件
form action#div classform-group row mt-5label foremail2 classcol-sm-2 col-form-labelEmail/label!-- col-form-lable用来决定下后面的表单进行垂直对齐 --div classcol-sm-10input typeemail classform-control idemail2 placeholder请输入email/div/divdiv classform-group rowlabel forpassword3 classcol-sm-2 col-form-labelPassword/label !-- col-form-lable用来决定下后面的表单进行垂直对齐 --div classcol-sm-10input typepassword classform-control idpassword3 placeholder请输入密码/div/divdiv classform-group rowlabel for classcol-sm-2兴趣爱好/labeldiv classcol-sm-10div classform-checkinput typecheckbox ideat classform-check-inputlabel foreat classform-check-label吃饭/label/divdiv classform-checkinput typecheckbox idsleep classform-check-inputlabel forsleep classform-check-label睡觉/label/divdiv classform-checkinput typecheckbox idplay classform-check-inputlabel forplay classform-check-label打豆豆/label/div/div/divdiv classform-group rowlabel for classcol-sm-2性别/labeldiv classcol-sm-10div classform-checkinput typeradio idmale classform-check-input namesexlabel formale classform-check-label男/label/divdiv classform-checkinput typeradio idfemale classform-check-input namesexlabel forfemale classform-check-label女/label/div/div/div
/form7.内联表单
.form-inline样式在单个水平行上显示一系列标签表单控件和按钮。
div classrow mt-5div classcolform action# classform-inlinediv classform-group mr-5label for用户名/labelinput typeemail classform-control valuekaivonqq.com/divdiv classform-group mr-5label for密码/labelinput typepassword classform-control/divdiv classform-group mr-5input typecheckbox classform-control-inputlabel for classform-control-label记住我/label/divdiv classform-group mr-5button typesubmit classbtn btn-primary提交/button/div/form/div
/div二、验证 表单验证通过CSS的两个伪类应用::invalid以及:valid。它适用于 input、 select、 textarea元素。 1.验证
form action# classneeds-validation novalidate//novalidate阻止h5默认验证div classform-rowdiv classcol-md-4 form-grouplabel forsurname姓/labelinput typetext classform-control idsurname placeholder请输入姓 value陈 requireddiv classvalid-feedback !-- 验证成功对应的class --验证通过/divdiv classinvalid-feedback !-- 验证失败对应的class --验证失败/div/divdiv classcol-md-4 form-grouplabel forname名/labelinput typetext classform-control idname placeholder请输入名 value学辉 requireddiv classvalid-feedback !-- 验证成功对应的class --验证通过/div/divdiv classcol-md-4 form-grouplabel forusename用户名/labelinput typetext classform-control idusename placeholder请输入用户名 requireddiv classinvalid-feedback请输入正确的用户名/div/div/divdiv classform-rowdiv classcol-md-6 form-grouplabel forhomeAddress家庭地址/labelinput typetext classform-control idhomeAddress placeholder请输入家庭地址 requireddiv classinvalid-feedback请输入正确的家庭地址/div/divdiv classcol-md-6 form-grouplabel forcompanyAddress公司地址/labelinput typetext classform-control idcompanyAddress placeholder请输入公司地址 requireddiv classinvalid-feedback请输入正确的公司地址/div/div/divdiv classform-groupdiv classform-checkinput typecheckbox classform-check-input idgrid requiredlabel forgrid classform-check-label同意所读内容/labeldiv classinvalid-feedback你必需同意此内容后才能继续操作/div/div/divbutton typesubmit classbtn btn-primary提交/button
/form
script(function(){var formsdocument.querySelectorAll(.needs-validation);forms.forEach(function(form,index){form.addEventListener(submit,function(ev){//监听提交if(form.checkValidity()false){ //如果表单验证成功那这个方法会返回trueev.preventDefault();//阻止form默认刷新ev.stopPropagation();//阻止冒泡}form.classList.add(was-validated);//提交事件发生后不管验证是否成功都需要给form身上添加这个class才能选择 到伪元素显示验证提示});});})();
/script2.自定义表单样式
原生的单选、多选等按钮样式过于朴素可以在这里重置。
div classrow mt-5div classcoldiv classform-group custom-control custom-checkboxinput typecheckbox ideat classcustom-control-inputlabel foreat classcustom-control-label吃饭/label/divdiv classform-group custom-control custom-radioinput typeradio idmale classcustom-control-input namesexlabel formale classcustom-control-label男/label/divdiv classform-group custom-control custom-radioinput typeradio idfemale classcustom-control-input namesexlabel forfemale classcustom-control-label女/label/div!-- 在一行中排列.custom-control-inline --div classform-group custom-control custom-radio custom-control-inlineinput typeradio idmale1 classcustom-control-input namesex1label formale1 classcustom-control-label男/label/divdiv classform-group custom-control custom-radio custom-control-inlineinput typeradio idfemale1 classcustom-control-input namesex1 disabled !-- 禁用表单 --label forfemale1 classcustom-control-label女/label/div!-- 下拉菜单 --select name id classform-group custom-selectoption value城市/optionoption value北京/optionoption value上海/optionoption value广州/option/select!-- 滑块 --div classform-grouplabel forrange1滑块/labelinput typerange classcustom-range idrange1/divdiv classform-grouplabel forrange2有范围的滑块/labelinput typerange classcustom-range min0 max5 idrange2/divdiv classform-grouplabel forrange3规定步长的滑块/labelinput typerange classcustom-range min0 max5 step0.5 idrange3/div!-- 文件选择custom-file-input --div classform-group custom-fileinput typefile classcustom-file-input idfilelabel forfile classcustom-file-labelChoose fild/label/div/div
/div
/div
