티스토리 뷰

Front-end/HTML

[Web/HTML] HTML - 복습 겸 정리2

poopooreum 2024. 4. 21. 19:43
반응형

✏️ 폼에서 사용하는 태그

종류 설명
<form> 폼의 시작과 끝
<fieldset> 폼 요소를 그룹으로 묶기
<legend> 필드셋에 제목을 붙임
<input> 사용자가 내용을 입력할 필드를 삽입
<select>, <option> 드롭다운 목록
<textarea> 텍스트를 여러 줄 입력할 수 있는 텍스트 영역 삽입
<datalist> 데이터 목록을 삽입

✏️ <input> 태그의 유형

종류 설명
text 한 줄짜리 텍스트를 입력
password 비밀번호를 입력
search 주소를 입력
url 검색할 때 입력하는 필드
email 이메일을 입력
tel 전화번호 입력
checkbox 여러 항목을 체크할 수 있음
radio 한 개의 항목만 체크 가능
number 숫자를 조절할 수 있는 스핀 박스
range 숫자를 조절할 수 있는 슬라이드 막대
date 사용자 지역을 기준으로 년/월/일
month 사용자 지역을 기준으로 년/월
week 사용자 지역을 기준으로 년/주
time 사용자 지역을 기준으로 시/분/초/분할 초
datetime 국제 표준시를 기준으로, 나머지는 time과 동일
datetime-local 사용자 지역을 기준으로 time + date
submit 제출하기
reset 초기화
image submit 대신에 사용할 이미지 버튼
button 버튼
file 파일을 첨부할 수 있는 버튼
hidden 사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드 생성

✏️ <input> 태그의 속성

종류 설명
autofocus 웹 문서가 열리면 입력 필드 안에 마우스 포인터를 표시
placeholder 자동 완성 기능
readonly 읽기 전용
required 필수적으로 입력해야 하는 칸
max 숫자 입력 필드에서 최댓값 지정
min 숫자 입력 필드에서 최솟값 지정
step 숫자 입력 필드에서 간격을 지정
maxlength 텍스트 관련 필드에서 입력할 수 있는 최대 길이 지정
minlength 텍스트 관련 필드에서 입력할 수 있는 최소 길이 지정
size 텍스트 관련 필드에서 화면에 표시할 글자 크기를 지정
list 연결할 데이터 목록을 지정

✏️ 실습해보기

연습문제 2

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>연습문제 2</title>
    <style>
      #container {
        width: 520px;
        border: 1px solid black;
        padding: 20px 40px;
        margin: 0 auto;
      }
      fieldset {
        margin-bottom: 15px;
      }
      legend {
        font-weight: bold;
      }
      ul {
        list-style-type: none;
      }
      li {
        line-height: 30px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <h1>프런트엔드 개발자 지원서</h1>
      <p>
        HTML, CSS, Javascript에 대한 기술적 이해와 경험이 있는 분을 찾습니다.
      </p>
      <hr />
      <form>
        <h4>개인정보</h4>
        <ul>
          <li>
            <label for="user-name">이름</label>
            <input
              type="text"
              id="user-name"
              autofocus
              placeholder="공백없이 입력하세요"
            />
          </li>
          <li>
            <label for="user-phone">연락처</label>
            <input type="tel" id="user-phone" />
          </li>
        </ul>
        <h4>지원 분야</h4>
        <ul>
          <li>
            <label
              ><input type="radio" name="apply" value="web" /> 웹
              퍼블리싱</label
            >
          </li>
          <li>
            <label
              ><input type="radio" name="apply" value="web_ap" /> 웹
              애플리케이션 개발</label
            >
          </li>
          <li>
            <label
              ><input type="radio" name="apply" value="dev_env" /> 개발 환경
              개선</label
            >
          </li>
        </ul>
        <h4>지원동기</h4>
        <label>
          <textarea
            cols="60"
            rows="5"
            placeholder="본사 지원 동기를 간략히 써 주세요."
          ></textarea>
        </label>
        <div>
          <input type="submit" value="접수하기" />
          <input type="reset" value="다시 쓰기" />
        </div>
      </form>
    </div>
  </body>
</html>

 

연습문제 1

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>연습문제 1</title>
    <style>
      ul {
        list-style: none;
      }
      li {
        line-height: 50px;
      }
      label {
        width: 60px;
        float: left;
      }
    </style>
  </head>
  <body>
    <h1>예약 정보</h1>
    <ul>
      <li>
        <label for="name">이 름</label>
        <input type="text" id="name" />
      </li>
      <li>
        <label for="phone">휴대폰</label>
        <input type="tel" id="phone" />
      </li>
      <li>
        <label for="mail">이메일</label>
        <input type="email" id="mail" />
      </li>
      <li>
        <input type="submit" value="예약하기" />
      </li>
    </ul>
  </body>
</html>
반응형
저작자표시 비영리 변경금지

'Front-end > HTML' 카테고리의 다른 글

[Web/HTML] - 폼에서 사용하는 태그들  (0) 2024.04.21
[Web/HTML] HTML- <input> 태그  (0) 2024.04.16
[Web/HTML] HTML - 폼(form) 삽입하기  (0) 2024.04.16
[Web/HTML] HTML - 복습 겸 정리  (0) 2024.04.15
[Web/HTML] HTML - 직접 만들어보기  (0) 2024.04.15
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함