에러 탈출 일지

입력 태그 속성 2. (label, fieldset, legend, range 태그) 본문

개발/HTML & CSS

입력 태그 속성 2. (label, fieldset, legend, range 태그)

뉴NEW 2022. 8. 29. 14:52

8. label 

- 텍스트를 레이블로 만들어 관리하는 태그

- 입력 박스의 id를 레이블 for로 연결하여 사용함.

<body>
<form action="" method="post">
      Q1. 학생의 이름을 입력하시오.<br>
      <label for="">이름:<input type="text" name="name"></label> <br><br>

      Q2. 학생의 학년을 선택하시오.<br>
      <label><input type="radio" name="year" value="s1" id="s1"><label for="s1">1학년</label>
      <label><input type="radio" name="year" value="s2" id="s2"><label for="s2">2학년</label>
      <label><input type="radio" name="year" value="s3" id="s3"><label for="s3">3학년</label>
      <label><input type="radio" name="year" value="s4" id="s4"><label for="s4">4학년</label><br><br>

      Q2. 수강하는 과목을 모두 선택하시오.<br>
      <label><input type="checkbox" name="subjects" id="c1" value="JAVA">JAVA</label>
      <label><input type="checkbox" name="subjects" id="c2" value="HTML5">HTMl5</label>
      <label><input type="checkbox" name="subjects" id="c3" value="Javascript">Javascript</label>
      <label><input type="checkbox" name="subjects" id="c4" value="Oracle">Oracle</label>
      <label><input type="checkbox" name="subjects" id="c5" value="JSP">JSP</label>
      <label><input type="checkbox" name="subjects" id="c6" value="Spring">Spring</label><br>
      <label><input type="submit" value="전송 완료">
  </form>
</body>

 

 

9. fieldset 태그

- 같은 종류의 입력 항목끼리 테두리로 묶어서 나타내고자 할 때 사용

10. legend 태그

- fieldset 태그의 제목을 만들어 주는 태그

<body>
  <form action="" method="post">
  Q. 학생의 성별과 학년을 선택하시오.<br>
    <fieldset>
        <legend>성별</legend>
        <input type="radio" name="gender" value="male" id="male"><label for="male">남성</label><br>
        <input type="radio" name="gender" value="male" id="female"><label for="female">여성</label><br>
    </fieldset><br>
    <fieldset>
        <legend>학년</legend>
        <input type="radio" name="year" id="y1" value="1"><label for="y1">1학년</label><br>
        <input type="radio" name="year" id="y2" value="2"><label for="y2">2학년</label><br>
        <input type="radio" name="year" id="y3" value="3"><label for="y3">3학년</label><br>
        <input type="radio" name="year" id="y4" value="4"><label for="y4">4학년</label><br>
    </fieldset>
  </form> 
</body>

 

11. email 입력 필드

- @를 입력하지 않으면, '이메일에 @를 포함해 주세요.' 라는 메시가 뜨는 입력 필드

12. url 입력 필드

- http:// 또는 url: 으로 시작하지 않으면 'URL을 입력하세요.' 라는 메시가 뜨는 입력 필드

13. tel 입력 필드

- 별도로 체크하는 부분은 없음

 

14. search 입력 필드

- 텍스트를 입력하면 x표시가 나타나며, x표시로 입력한 내용을 한번에 삭제할 수 있음.

 

15. 날짜 입력필드

- date: 년월일 선택 필드

- datetime-local: 년월일 시분초 선택 필드

- datetime: 동작 안 함

- time: 시분초 선택 필드

<body>
  <h3>날짜 입력필드</h3>
  <form action="" method="post">
    회의 날짜: <input type="date" name="date" id="date"><br>
    미팅 날짜1: <input type="datetime" name="dt1" id="dt1"><br><!-- 실행 x -->
    미팅 날짜2: <input type="datetime-local" name="dt2" id="dt2"><br> <!-- 우리나라에선 datatime-local 사용-->
    회의 시간: <input type="time" name="time" id="time">
  </form>
</body>

 

 

16. 수치 입력 태그

- 필드 오른쪽 끝에 1씩 증가와 감소 할 수 있는 버튼이 나타탐

- 숫자가 아닌 문자는 입력되지 않음

- value: 초깃값, max: 최댓값, min: 최솟값, step: 증감값

- 숫자 버튼을 사용할 떄만 위의 설정값이 작동 함

- 직접 입력하면 설정값이 무효화 됨

17. range 태그: 수치의 범위 선택 태그

- value: 초깃값, max: 최댓값, min: 최솟값, step: 증감값

18. color 입력 필드: 색상 선택 태그

- value: 초깃값, max: 최댓값, min: 최솟값, step: 증감값

 
저작자표시 (새창열림)

'개발 > HTML & CSS' 카테고리의 다른 글

[CSS] CSS 적용 방법  (0) 2022.08.30
[HTML] 선택자 : tag, id, class  (0) 2022.08.30
[HTML] 입력 태그 속성 1. (text, password, radio, checkbox, file, textarea, select)  (0) 2022.08.26
[HTML] a 태그, form 태그, input 태그  (0) 2022.08.26
[HTML] 이미지(img) 태그  (0) 2022.08.26
'개발/HTML & CSS' Related Articles more