Keyword overview
Form tag and web accessibility
The Code Card
Form default property
https://lshjju.tistory.com/774
Form default property
태그의 5가지 핵심 속성을 집중적으로 분석해 보겠습니다.이 속성들은 사용자가 입력한 데이터가 어떤 경로로, 어떤 방식으로 운반될지를 결정하는 '운송 규격'과 같습니다.1. action (목적지 주소
lshjju.tistory.com
Form tag
https://lshjju.tistory.com/775
Form tag
사용자가 실제로 데이터를 입력하고 화면에서 보게 될 **폼 구성 요소(Form Elements)**들에 대해 알아보겠습니다.이 태그들은 입력창을 그룹화하거나, 긴 글을 입력받고, 목록에서 선택하는 등 다양
lshjju.tistory.com
Input tag type
https://lshjju.tistory.com/776
Input tag type
사용자가 실제로 데이터를 입력하는 가장 핵심적인 도구인 ** 태그의 다양한 타입(type)**에 대해 알아보겠습니다.type 속성에 어떤 값을 넣느냐에 따라 입력창은 단순한 글자 상자에서 달력, 선택
lshjju.tistory.com
Input tag property
https://lshjju.tistory.com/777
Input tag property
입력창의 동작과 제약 조건을 세밀하게 제어하는 태그의 핵심 속성들에 대해 알아보겠습니다.이 속성들은 사용자가 폼을 작성할 때의 편의성을 높여주고, 잘못된 데이터가 제출되지 않도록 막
lshjju.tistory.com
Form tag and web accessibility
https://lshjju.tistory.com/778
Form tag and web accessibility
웹 양식(Form)은 사용자가 정보를 입력하고 제출하는 핵심 통로인 만큼, 접근성 수칙을 지키는 것이 매우 중요합니다.단순히 예쁘게 만드는 것을 넘어, 누구나 오차 없이 입력을 완료할 수 있도록
lshjju.tistory.com
Code training
05-1 폼 삽입하기
웹에서 만나는 폼
폼을 만드는 <form> 태그
자동 완성 기능을 나타내는 autocomplete 속성
폼 요소를 그룹으로 묶는 <fieldset>,<legend> 태그
폼 요소를 그룹으로 묶어서 표현하기
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/fieldset.html
폼 요소에 레이블을 붙이는 <label> 태그
<label> 태그 안에 <input> 태그 넣기
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/label-1.html
폼 요소와 <label> 태그를 따로 작성하고 연결하기
다양한 곳에서 사용하는 웹 폼의 <input> 태그
<input> 태그의 type 속성 한눈에 살펴보기
텍스트와 비밀번호를 나타내는 type="text" type="password"
간단한 로그인 폼 만들기
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/login.html
다양한 용도에 맞게 입력하는 type="search" type="url" type="email" type="tel"
배송 정보를 입력하는 폼 만들기
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/t-field.html
체크 박스와 라디오 버튼을 나타내는 type="checkbox" type="radio"
라디오 버튼과 체크박스를 사용해 폼 만들기
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/radio-check.html
실습 - 회원 가입 신청서 만들기
1단계 <form> 태그와 <fieldset> 태그 입력하기
2단계 첫번째 필드 세트에 텍스트 추가하기
3단계 두번째 필드 세트에 라디오 버튼 추가하기
4단계 버튼 삽입하기
준비
https://github.com/lshjju/doit-hcj-new/blob/main/05/register.html
결과
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/register-1.html
숫자 입력 필드를 나타내는 type="number", type="range"
스핀 박스를 사용해 숫자 입력하기
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/number.html
슬라이드 막대를 사용해 값 조절하기
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/range.html
날짜 입력을 나타내는 type="date" type="month" type="week"
3가지 형식의 날짜 입력하기
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/date-1.html
시간 입력을 나타내는 type="time", type="datetime-local"
시간을 지정하는 2가지 형식
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/date-1.html
날짜의 범위를 제한하여 입력하기
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/date-3.html
전송, 리셋 버튼을 나타내는 type="submit", type="reset"
전송 버튼과 리셋 버튼 추가하기
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/button-1.html
이미지 버튼을 나타내는 type="image"
이미지 버튼 추가하기
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/login-image.html
기본 버튼을 나타내는 type="button"
버튼을 삽입해 자바스크립트 실행하기
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/button-2.html
파일을 첨부할 때 사용하는 type="file"
파일 첨부 버튼 추가하기
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/file.html
히든 필드 만들 때 사용하는 type="hidden"
히든 필드를 사용해 서버로 정보 보내기
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/hidden.html
05-3 input 태그의 주요 속성
입력 커서를 자동으로 갖다 놓는 autofocus 속성
힌트를 표시해 주는 placeholder 속성
autofocus 와 placeholder 속성 사용하기
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/placeholder.html
읽기 전용 필드를 만들어 주는 readonly 속성
필수 입력 필드를 지정하는 required 속성
readonly와 required 속성 사용하기
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/required.html
실습 - 회원 가입 신청서에 속성 지정하기
1단계 autofocus 와 placeholder 속성 넣기
2단계 chcked 속성 넣기
3단계 브라우저에서 확인하기
준비
https://github.com/lshjju/doit-hcj-new/blob/main/05/register.html
완성
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/register-2.html
05-4 폼에서 사용하는 여러 가지 태그
여러 줄을 입력하는 텍스트 영역 <textarea> 태그
텍스트를 여러 줄 입력할 수 있는 [메모] 필드 만들기
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/textarea.html
드롭다운 목록을 만들어 주는 <select>, <option> 태그
<select> 태그의 속성 알아보기
<option> 태그의 속성 알아보기
드롭다운 목록 만들기
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/select.html
버튼을 만들어 주는 <button> 태그
<button> 태그를 사용해 버튼 삽입하기
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/button-3.html
실습 - 드롭다운 목록과 텍스트 영역 추가하기
1단계 드롭다운 목록 삽입하기
2단계 텍스트 영역 삽입하기
준비
https://github.com/lshjju/doit-hcj-new/blob/main/05/register.html
완성
https://github.com/lshjju/doit-hcj-new/blob/main/05/results/register-3.html
Copyright
이 포스팅의 깃허브코드와 강의 목차 저작권은 이지스퍼블리싱에 있습니다.
https://www.easyspub.co.kr/20_Menu/BookView/696/PUB
'Do it! HTML 웹 표준의 정석' 카테고리의 다른 글
| text / list / table / image / multi media / hyper link (0) | 2025.11.06 |
|---|---|
| HTML and Semantic tag (0) | 2025.11.06 |
| Web Development setting (0) | 2025.11.06 |
| About Web (0) | 2025.11.06 |