Section 5: HTML: Forms & Tables (2)

Zvezda89·2022년 5월 2일
0

2022.05.01 07:35 PM ~ 2022.05.02 01:49 AM

Section 5: HTML: Forms & Tables

* 글속 태그들 < >는 ( )로 대체


<< Checkbox (input 태그) >>

-> 1. (input type="checkbox" name="전달 값 설명" id="label과 연결할 이름" />

※ 나중에 제출해보면 "~?지정한name=on"을 볼 수 있음.
※ form안에 checkbox가 여러개라도 전부 체크가능함. 각자 독립적인 요소라.


<< Radio Button >>

※ 몇지선다형 같은 선택지를 주고 고르게 하는 것임.
※ 같은 태그를 여러개 만들고, name=""을 똑같은 것으로 지정함.

ex: (input type="radio" name="size" id="xs" value="xs">
id값은 label 태그 등을 위해서, name은 전달할 값의 설명을 위해,
value는 선택한 값이 무엇인지 보여주기 위해 넣는 속성


<< Select (Dropbox) 태그 >>

※ 하위 선택지들은 (option value="전달 값">내용(/option>
등으로 여러개 넣음. 원하는 값이 제일 먼저 선택되어 있게 하려면
option 뒤에 "selected" 속성을 넣으면 됨

-> 1. (select name="전달할 값의 설명" id="label 등을 위한 것">(/select>


<< Range (범위) 태그 >>

※ 좌, 우로 끌수있는 슬라이드, 마치 오디오 음량 조절기 같은 것을 생성가능

-> 1. (input type="range" id="" name"" min="원하는 최소 값" max="원하는 최대 값 />

※ 초기 값 지정 : value="원하는 default value"
※ 슬라이드 한 칸 움직일때 마다 건너뛰길 바라는 값을 지정 : step="원하는 값"
(ex: 최소는 1인데, step이 7이면 한칸 옮기면 8이 됨.)


<< Textarea 태그 >>

※ 커다란 텍스트 입력 창 하나를 만들어 줌.
※ 예를 들면, 개인정보 수정 페이지에서 '자기소개' 입력 칸 같은 거.

-> 1. (textarea id="" name="" rows="원하는 행 값" cols="원하는 열 값" placeholder="">
원한다면 뭔가 입력해놓을 수 있음(/textarea>


<< HTML Form Validations >>

※ "유효성 검사"라는 뜻
※ 아이디는 영문 소문자와 숫자로 7~12자 사이,
비밀번호는 어쩌구 이런 것들.
※ Submit의 조건에 맞지 않는데 submit 하려 할 시에, HTML에서 경고해주는 것

-> 1. "required" : input 태그 등의 뒤쪽에 붙이는 attribute.
(ex: id 입력하는 칸 부분 비우고 "submit" 시,
HTML이 "ID를 입력하세요!"하고 경고창 띄우는 것)

-> 2. "minlength" : 상동, 필수 최소 입력 글자. attribute.
(ex : 비밀번호 칸에 2글자만 입력하고 "submit" 시,
"비밀번호는 최소 5자리가 되어야 합니다!" 같은 경고창을 띄우는 것)

-> 3. "maxlength" : 상동, 필수 최대 입력 글자. attribute.
(ex : "비밀번호가 너무 깁니다. 최대 20자까지 가능합니다!" 같은 메세지를 띄움)

※ 처음부터 Validation이 적용된 attribute도 있음.
(ex: input type 중 'url' or 'tel(텔레폰)' 등등....)

profile
Come As You Are

0개의 댓글