HTML 입력 태그 문제 닫기

Question

HTML <input> 태그가 다른 HTML 태그처럼 닫는 태그를 얻지 못하는 이유와 입력 태그를 닫으면 어떻게 될까요?

나는 Google에 시도해 본 결과 으로 닫지 않는 <input type="text" name="name">과 같은 입력 태그를 작성하는 표준을 발견했습니다. 제가

var DOM_tag = document.createElement("input"); 

이 비록 생성 라디오 버튼하지만

document.createTextNode("Radio Label"); 

하지 않는 제가

와 라디오 버튼에 첨부 TextNode 사용 Radio 버튼에 대한 입력 태그를 만들 때

는 개인적 문제 펠트 작업. 이 경우와 마찬가지로 라디오 버튼을 Radio Label과 함께 표시합니다. 나는 전체 코드

<input id="my_id" type="radio" name="radio_name">Radio Label</input> 

을 볼 수 있지만 사람이 제발 설명 할 수 있습니까?

추신 : 내가 닫는 태그를 자동으로 작성하는 var DOM_tag = document.createElement("input");을 사용하면서 내가 질문에서 언급 한 것처럼 자동으로 입력 태그를 닫는 것입니다. 그것에 대해 어떻게해야합니까?

Answer 1

이들은 공백 요소입니다. 즉, 텍스트 나 다른 요소를 포함하도록 설계되지 않았으므로 필요하지 않습니다. 실제로는 은 HTML의 닫는 태그 인을 가질 수 없습니다. ¹

그러나, 그들은 <label> 그들과 관련된 가질 수 있습니다

<input id="my_id" type="radio" name="radio_name"> 
<label for="my_id">Radio Label</label> 

자연에 의해

라디오 버튼 어쨌든 텍스트를 포함 할 수 없습니다, 그래서 그들에게 텍스트 또는 기타를 받아들이는 것이 이해가되지 것 요소를 내용으로 텍스트를 입력으로 받아들이지 않는 컨트롤에 대한 또 다른 문제는 텍스트 내용이 그 값 또는 레이블이되어야 하는가? 모호성을 피하기 위해 우리는 주석에 표시된 것과 정확히 일치하는 <label> 요소를 가지고 있고 입력 제어 값을 나타내는 value 속성이 있습니다.

---

¹ _{XHTML 다르다; XML 규칙에 따라 모든 태그를 열고 닫아야합니다. 후자는 동등하게 허용하지만이는 대신 </input> 태그의 바로 가기 구문을 사용하여 수행됩니다 어떤 내용이나 닫는 태그를 갖도록 설계 아니에요 점에서}

<input id="my_id" type="radio" name="radio_name" /> 
<label for="my_id">Radio Label</label> 

Answer 2

<input>는, 빈 태그입니다. 준수를 위해,이처럼 사용하여 태그의 끝을 의미 할 수 있습니다 : 아무 내용이없는 태그를 닫습니다 XHTML 준수 방법입니다

<input type="text" value="blah" /> 

합니다. <img> 태그에 대해서도 마찬가지입니다.

라디오 버튼에 라벨을 지정하려면 BoltClock의 답변에서 설명하는대로 <label> 태그를 사용하는 것이 가장 바람직합니다.

Answer 3

당신은 라디오 버튼 옆에있는 라벨을 넣어

var label = document.createTextNode("Radio Label"); 
DOM_tag.parentElement.insertBefore(label,DOM_tag); 

를 사용할 수 있습니다.

Answer 4

원산지는 SGML의 빈 요소 개념에 있으며 일부 요소는 외부 소스 또는 환경에서 삽입 될 내용의 자리 표시 자 역할을한다는 개념이 있습니다. 그렇기 때문에 img과 input은 HTML에서 빈 것으로 선언되었거나 더 정확하게는 EMPTY로 선언 된 콘텐츠가있는 것으로 선언 된 것입니다 (즉, 내용이 없거나 빈 콘텐츠가 비어있는 요소와 반대 임). 자세한 설명은 내 페이지 Empty elements in SGML, HTML, XML, and XHTML을 참조하십시오.

이러한 요소의 시작 태그가 닫기 태그 역할을한다는 의미입니다. SGML 또는 HMTL 문서를 처리하는 소프트웨어는 DTD (Document Type Definition)에서이 속성을 가진 태그를 알고 있어야합니다. 실제로 이러한 정보는 웹 브라우저에 내장되어 있습니다. </input>과 같은 종료 태그를 사용하는 것은 유효하지 않지만 브라우저는 인식 할 수 없거나 가짜 종료 태그를 건너 뛰기 만합니다.

XML에서는 XML이 SGML의 강력하게 단순화 된 변형이며 단순하게 처리되기 때문에 XHTML에서는 사물이 다릅니다. XML을 처리하는 소프트웨어는 DTD없이 모든 구문 분석을 수행 할 수 있어야하므로 모든 요소에 대해 XML을 닫는 태그가 필요합니다 (대부분 일 경우의 경우 <input />과 같은 특수 구문을 <input></input>의 약어로 사용할 수 있음). 그러나 XHTML은 여전히 ​​태그 사이에 내용을 허용하지 않습니다.

내용이 없으므로 요소 내부에 입력 요소의 레이블을 지정할 수 없습니다. title, value 또는 (HTML5) placeholder 속성을 사용하여 텍스트와 텍스트를 다른 의미로 연관시킬 수 있지만 정상적인 보이는 내용을 레이블로 사용하려면 다른 요소에 있어야합니다. 다른 답변에서 설명한 것처럼 label 요소에 넣고 id 및 for 특성과의 연결을 정의하는 것이 좋습니다.

Answer 5

createElement/createTextNode 조합을 사용하면 가장 효과적입니다.

$('#list-consultant').append(
    $(document.createElement('div')).addClass('checkbox').append(
     $(document.createElement('label')).append(
      $(document.createElement('input')).prop({ 
       type: 'checkbox', 
       checked: 'checked' 
      }), 
      $(document.createTextNode('Ron Jeremy')) 
     ) 
    ) 
); 

위의 조각은 생산됩니다

<div id='list-consultant'> 
    <div class='checkbox'> 
     <label><input type='checkbox' checked='checked'/>Ron Jeremy</label> 
    </div> 
</div> 

Answer 6

당신은 시도 할 수 있습니다 :

var label = document.createTextNode("Radio Label"); 
document.createElement("input").prop({type="text"}); 
document.write(input.append(label)); 

이되지 않을 수 작동 할 수 있습니다. (그것은 나를 위해 작동하지 않았지만, 나는 생각하지 못했습니다. 나는 그것을 할 것이라고 생각했습니다.) 도움이된다면, 훌륭합니다. (난 아직도 자바 스크립트를 배우고 있습니다.)

그렇지 않으면 사용하는 표준 대답 스틱 : 내가 일반적으로 할 것 인 것이다

<input id="my_id" type="radio" name="radio_name" /> 
<label for="my_id">Radio Label</label> 

. 건배!