海外如何淘宝网站建设,网站用什么软件编写,太平保险网站,济南网站设计公司排名生成器函数生成表单字段是非常合适的用法,避免你要用纯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
