html label和input的间距,js中关于label和input的烦恼

.oneline {

line-height: 1.5;

margin: 10px auto;

}

.oneline label {

width: 100px;

text-indent: 15px;

font-size: 14px;

font-family: "Microsoft Yahei";

display: inline-block;

}

.oneline .sinput {

width: 60%;

height: 30px;

border-radius: 6px;

border: 1px solid #e2e2e2;

}

.oneline input[type="submit"] {

margin-left: 20px;

width: 80px;

height: 30px;

border: 0;

background-color: #5899d0;

color: #fff;

font-size: 14px;

border-radius: 6px;

}

.error-messages {

color: red;

}

用户名:

Email:

function replaceValidationUI(form) {

form.addEventListener("invalid", function(event) {

event.preventDefault();

}, true);

form.addEventListener("submit", function(event) {

if (!this.checkValidity()) {

event.preventDefault();

}

},true);

//此处写代码

var submits = document.getElementById('submits');

submits.addEventListener('click',function(event){

var fields = form.querySelectorAll(':invalid'),

error = form.querySelectorAll('.error-messages'),

parent,label;

for(var i = 0;i

error[i].parentNode.removeChild(error[i]);

};

for(var m = 0;m < fields.length;m++){

label = form.querySelector('label[for='+ fields[fields.length-m-1].id+']');

parent = form;

parent.insertAdjacentHTML("afterBegin","

• " + label.innerText + fields[m].validationMessage+"

");

};

if (fields.length > 0) {

fields[0].focus();

};

})

}

var forms = document.getElementById("forms");

replaceValidationUI(forms);

就是 ，有个bug谁能帮我解决下， 我把input  type="text" 空着，只输入 type="email" 的内容，邮箱格式错误提示会显示在label for=”name“上，这样就很尴尬。