html <table>안에 <label>과 </label>을 다른 <td>칸에 둘 방법 있나요?

Question

<form> 안의 여러 질문 인풋들을 정렬하려고 <table>을 이용해서 이런식으로 <label>하고 싶은데 그렇게 하니까 못 한다고 빨간줄이 뜨네요. 이런 식으로 라벨을 감싸고 싶은 이유는 폼 인풋뿐 아니라 라벨에 둘러싸인 공간을 클릭했을 때 인풋이 활성화되었으면 해서 그렇습니다. 혹시 제 의도가 충족되면서 테이블을 이용할 수 있는 방법이나 다른 대안을 제시해 주실 수 있나요?

<tr>

<td><label>2. Is this the first time attending this event?&nbsp;</td>

<td>

<input name="optFirst" type="radio" value="yes">Yes<input name="optFirst" type="radio" value="no">No</label>

</td>

</tr>

Answer 1

안녕하세요.

html 태그들은 태그를 열고 닫을때 짝이 맞아야 됩니다.

<td><label></label></td> 이런식으로 맞아야 됩니다. 먼저 열었던 태그가 있으면 먼저 닫아줘야 합니다.

만약에 구현할려고 하면 <td></td> 하나에 문구랑 인풋도 같이 넣고 <label></label> 로 감싸야 될 것 같은데요.

아니면 될지는 모르겠는데 <label><td></td> <td></td> </label> 이런식으로 td 밖으로 label을 감싸 보시죠.

Answer 2

https://www.w3schools.com/html/html_tables.asp

위 링크 가시면 table 과 관련하여 여러가지 출력제어 방식에 대해 상세히 설명이 나와 있습니다

또한 직접 소스를 수정하여 바로 결과도 확인할수 있구요

한번 위 링크에서 원하는 기능이 있는지 확인해보세요

Answer 3

안녕하세요 .

우선 label태그를 왜 사용해야 하는지 부터 알아야 할거 같아요.

label 태그는 input 태그에서 사용이 되는데요

값을 받는 폼 소스에서 checkbox 나 radio 로 체크를 하는데요

checkbox 는 □ 칸 안에 v 로 체크되는 박스구요

radio 는 ○ 칸 안에 점을 체크되는 박스입니다

그 소스 앞뒤로 label 태그를 넣어주시면 꼭 빈칸에 클릭을 안하더라도

글씨부분에 클릭을 하더라고 체크가 되는 소스라고 보시면 됩니다

예1 - 체크박스 직접체크만 됨

<input type="checkbox" value="1" name="네모칸 클릭 v 체크1" />네모칸 클릭 v 체크1

ㅁ네모칸 클릭 v 체크1

예2 - 텍스트 클릭시 체크 됨

<label><input type="checkbox" value="1" name="네모칸 클릭 v 체크2" />네모칸 클릭 v 체크2</label>

ㅁ네모칸 클릭 v 체크2

예3 - 예2와 동일 하지만 클릭하는 텍스트와 연동되어 클릭하는 텍스트와 떨어져 있어도 해당 id를 찾아 체크 함

<label for="네모칸 클릭 v 체크3"></label>

<br /><br /><br /><br /><br /><br /><br />

<input type="checkbox" value="1" name="네모칸 클릭 v 체크3" id="네모칸 클릭 v 체크3" />네모칸 클릭 v 체크3

이해가 되셨나요?

-------------------------아래 처럼 수정

<tr>

<td><label for="optFirst">2. Is this the first time attending this event?&nbsp;</label></td>

<td>

<input name="optFirst" type="radio" value="yes">Yes<input name="optFirst" type="radio" value="no">No

</td>

</tr>