CODEWITHSUNDEEP
htmlinputattributestags
mikezang
mikezang

Reputation: 2499

There is ORDER for HTML tag attributes

I tried the same attributes for input tag but different order, the layout will be difference. I think tag's attributes are no order, can you explain to me? By the way, class field as below:

.field {
  font-family: "MS UI Gothic";
  font-size: 12px;
  height: 17px;
  border: 1px solid #ADD566;
  readonly: false;
}

Input1 tag:

input1.jpg

Input2 tag:

enter image description here

   .field {
	  font-family: "MS UI Gothic";
	  font-size: 12px;
	  height: 17px;
	  border: 1px solid #ADD566;
	  readonly: false;
    }
Input1 tag:

	<input name="code" size="9" maxlength="6" type="text" onChange="javascript:this.value=this.value.toUpperCase();" style="ime-mode:disabled; text-transform:uppercase"　class="field" value="">

Input2 tag:

	<input name="code" size="9" maxlength="6" type="text" class="field" onChange="javascript:this.value=this.value.toUpperCase();" style="ime-mode:disabled; text-transform:uppercase"　value="">

Upvotes: 2

Views: 124

Answers (1)

Dalin Huang
Dalin Huang

Reputation: 11342

There is a special character (U+3000 : IDEOGRAPHIC SPACE) before class, use white space (U+0020 : SPACE [SP]) only.

You can test it here: http://www.babelstone.co.uk/Unicode/whatisit.html

Your code:

.field {
  font-family: "MS UI Gothic";
  font-size: 12px;
  height: 17px;
  border: 1px solid #ADD566 !important;
  readonly: false;
}
 Input1 tag:
<input name="code" size="9" maxlength="6" type="text" onChange="javascript:this.value=this.value.toUpperCase();" style="ime-mode:disabled; text-transform:uppercase"　class="field" value="">
Input2 tag:
<input name="code" size="9" maxlength="6" type="text" class="field" onChange="javascript:this.value=this.value.toUpperCase();" style="ime-mode:disabled; text-transform:uppercase" value="">

After replacing it with white space:

.field {
  font-family: "MS UI Gothic";
  font-size: 12px;
  height: 17px;
  border: 1px solid #ADD566 !important;
  readonly: false;
}
Input1 tag:
<input name="code" size="9" maxlength="6" type="text" onChange="javascript:this.value=this.value.toUpperCase();" style="ime-mode:disabled; text-transform:uppercase" class="field" value="">
Input2 tag:
<input name="code" size="9" maxlength="6" type="text" class="field" onChange="javascript:this.value=this.value.toUpperCase();" style="ime-mode:disabled; text-transform:uppercase" value="">

Upvotes: 3

Related Questions