android网站开发视频,慈溪网站制作,建设局主要负责什么,自己建的网站也要注册域名吗生成器函数生成表单字段是非常合适的用法,避免你要用纯javascript做后台时频繁的制作表单#xff0c;而不能重复利用 //这里是javascript部分#xff0c;formfiled.js
//生成器函数对字段的处理#xff0c;让各字段name\className\label\value\placeholder赋值到input的属性…生成器函数生成表单字段是非常合适的用法,避免你要用纯javascript做后台时频繁的制作表单而不能重复利用 //这里是javascript部分formfiled.js
//生成器函数对字段的处理让各字段name\className\label\value\placeholder赋值到input的属性上
function * formFieldGenerator(fields)
{for(const field of fields){switch(field.type){case text:if(field.value.trim() || field.value.toString()undefined){yield div class${field.className}label${field.label}input typetext name${field.name} value placeholder${field.placeholder} autocompleteoff/label/div;}else{yield div class${field.className}label${field.label}input typetext name${field.name} value${field.value} placeholder${field.placeholder} autocompleteoff/label/div}break;case email:yield div class${field.className}label${field.label}input typeemail name${field.name} value${field.value || } placeholder${field.placeholder} autocompleteoff/label/div;break;case password:yield div class${field.className}label${field.label}input typepassword name${field.name} value${field.value||} autocompleteoff/label/div;break; case checkbox:yield labelinput typecheckbox name${field.name} value${field.value}${field.label}/label;break;case submit:yield div class${field.className}input typesubmit name${field.name} value${field.value}/div;break;case button:yield div class${field.className}input typebutton name${field.name} value${field.value}/div;break;default:yield !---不支持此字段${field.type}--; }}
}//字段配置表你需要生成那些字段按类型进行编写
const formFields[{type:text,name:username,placeholder:请输入用户名,value:,label:用emsp;户emsp;,className:regInput},{type:password,name:pwd,label:密emsp;码emsp;,className:regInput},{type:password,name:pwd2,label:重emsp;复emsp;,className:regInput},{type:email,name:yourEmail,placeholder:输入电子邮件,label:邮emsp;件emsp;,className:regInput},{type:checkbox,name:language,label:javascript,value:javascript},{type:checkbox,name:language,label:php,value:php},{type:checkbox,name:language,label:java,value:java},{type:checkbox,name:language,label:nodejs,value:nodejs},{type:submit,name:regsubmit,value:提交,className:btn1},];
//获取html上的容器将创建的表单添加进去
const formHtmldocument.createElement(form1);
//设置表单的属性
formHtml.setAttribute(action,submit_form.php);
formHtml.setAttribute(method,post);
formHtml.setAttribute(name,regform1);
//利用formFieldGenerator(formFields)生成器函数安字段配置表生成表单内容
formHtml.innerHTMLArray.from(formFieldGenerator(formFields)).join();
//加入容器内
document.getElementById(container).appendChild(formHtml);//前端生成表单index.html
!DOCTYPE html
html langenheadmeta http-equivcontent-type contenttext/html;charsetUTF-8title用生成器生成表单/titlestyle typetext/css#container{width: 1050px;margin: 5px auto;border: 1px solid red;text-align: center;font-size: 16px;padding-top:10px;}.regInput{margin-bottom: 15px;}.regInput label{font-family: Arial, Helvetica, sans-serif;}.regInput input{text-indent: 5px;}.btn1{margin-top: 15px;}/style/headbodydiv idcontainer/divscript srcformfiled.js/script/body
/html
