HTML 닫기

HTML 닫기 태그 문제

---

HTML <input>태그가 다른 HTML 태그처럼 닫는 태그를 얻지 못하는 이유 와 입력 태그를 닫으면 어떤 문제가 발생하는지 궁금합니다.

나는 Google에 노력하고 나는이 같은 입력 태그를 작성하는 표준 발견 <input type="text" name="name">으로 닫을 수 없습니다 </input>.

Radio버튼을 사용하여 입력 태그를 만들 때 개인적으로 문제를 느꼈습니다.

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

이것은 라디오 버튼을 만들었지 만 라디오 버튼에 TextNode추가했습니다.

document.createTextNode("Radio Label");

작동하지 않습니다. Radio Label이 경우 와 같이 단순히 라디오 버튼이 표시되지 않습니다 . 완전한 코드를 볼 수 있지만 :

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

아무도 설명해 주시겠습니까?

추신
나에게 발생한 주요 문제는 내가 사용하고있는 질문에서 언급했듯이 var DOM_tag = document.createElement("input");자동으로 닫는 태그를 생성하는 입력 태그가 자동으로 닫히는 것입니다 . 어떻게해야합니까?

---

이들은 무효 요소입니다. 즉, 텍스트 또는 기타 요소를 포함하도록 설계 되지 않았으므로 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>

---

기원은 SGML의 빈 요소 개념에 있으며, 아이디어는 일부 요소가 외부 소스 또는 환경에서 삽입되는 콘텐츠의 자리 표시 자 역할을한다는 것입니다. 이유입니다 img및 input예를 들어, (즉, 아무 내용도 그냥 부담없이 빈 내용이 요소에 대한 반대로서, 가능성 없음) EMPTY 선언 내용을 가진 것으로, 더 정확하게, HTML 빈, 또는 선언했다. 더 긴 설명은 내 페이지 SGML, HTML, XML 및 XHTML의 빈 요소를 참조하십시오 .

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

XML에서, 따라서 XHTML에서는 XML이 SGML의 강력하게 단순화 된 변형이고 단순하게 처리되도록 의도 되었기 때문에 상황이 다릅니다. XML이 모든 요소 태그를 닫을 필요 그래서 당신이 할 수있는 (그리고, 호환성을 위해 주로하지만 프로세스의 XML은 어떤 DTD없이 모든 구문 분석을 수행 할 수 있어야 소프트웨어 해야는 ) 같은 특수 구문을 사용 <input />속기로 <input></input>. 그러나 XHTML은 여전히 ​​태그 사이에 콘텐츠를 허용하지 않습니다.

따라서 콘텐츠를 가질 수 없으므로 요소 자체 내부의 입력 요소에 대한 레이블을 지정할 수 없습니다. 당신은 사용할 수 있습니다 title, value또는 (HTML5에서) placeholder다른 감각의 그것과 연관 텍스트, 속성을, 그러나 레이블, 그것은 다른 요소에 있어야 정상적인 눈에 보이는 내용을 가지고. 다른 답변에서 설명한 것처럼 label요소 에 넣고 id및 for속성 과 의 연관성을 정의하는 것이 좋습니다 .

---

<input>내용이나 닫는 태그를 갖도록 설계되지 않았다는 점에서 빈 태그입니다. 규정 준수를 위해 다음과 같이 사용하여 태그의 끝을 나타낼 수 있습니다.

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

내용이없는 태그를 닫는 XHTML 호환 방법입니다. <img>태그도 마찬가지 입니다.

라디오 버튼에 레이블을 지정하려면 <label>BoltClock의 답변에서 설명한대로 태그를 사용하는 것이 가장 좋습니다 .

---

당신이 사용할 수있는

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

라디오 버튼 옆에 레이블을 붙입니다.

---

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>

---

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

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

작동 할 수도 있고 아닐 수도 있습니다. (저에게는 효과가 없었지만, 왜 안되는지 모르겠습니다. 그럴 것이라고 생각했습니다.) 도움이된다면 좋습니다. (저는 여전히 Javascript를 배우고 있습니다.)

그렇지 않으면 다음을 사용하는 표준 답변을 고수하십시오.

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

그것이 내가 일반적으로하는 일입니다. 건배!

참고 URL : https://stackoverflow.com/questions/13232121/closing-html-input-tag-issue