html: form 태그와 속성, input, label, select, fieldset

 

11월 23일 3일차

 

FORM (인라인)

<form name="#" action="send 클릭 시 연동 파일" method="#"> → 필수항목

</form>

 

* method

- get : 기본, 공개, 짧은 데이터, 주소줄에 노출, 보안 ↓

- post : 긴 데이터, 보안 ↑, 주로 개인정보 비번 등

 

input (단일태그= 닫을필요 없음)

<input type="#" id="label for 속성" name="#" value="초기값" placeholder="#" size="글상자길이, 한글기준" maxlength="최대글자입력수" required>

 

type 

text

password

radio : 원형 선택, 택일이므로 id는 각각, name은 동일하게 작성

checkbox : 다중선택 가능하므로 id, name 모두 각각 작성

file(첨부파일)

submit, reset : 버튼 이름은 value 값으로 지정

image(사용자가 만든 이미지를 버튼으로 사용, 최근엔 css 이용)

hidden

↓ 속성=값 경우 생략하고 속성만 작성 가능

required 입력 시 필수 항목 설정

disabled

checked

multiple

↓이하 html5 추가 속성, 적용 안 되는 브라우저 있을 수 있음

color

number : 스핀버튼, min, max, step

tel : 모바일 키패드

email : 모바일 @ 키보드

date : 달력

month

week

time

range

search : 돋보기

url : www 버튼

 

id 디자인용, label과 연관, 한 페이지 안 하나의 id

name 각 input 태그마다 지정해줘야 파일로 넘어감, id와 같은 값 입력 추천, 서버로 전달

title 설명 for 웹접근성

value 기본값, 실제 작성되는 항목

placeholder 디자인 상 보여지는 텍스트, 회색으로 표시

↓이하 html5 추가 속성, 적용 안 되는 브라우저 있을 수 있음

pattern text, date, search, url, tel, email, password 에서 사용, 이후 자바스크립트 할 때 다시 공부할 예정

 

label for 웹접근성

: 항목이나 파일을 식별하기 위해 사용되는 제목/이름

<label for="input id 속성">

    <input type="">

</label>

label 태그 속 input 태그 사용 경우 for(label)/id(input) 필요 없음

두 태그 연관 시, radio 텍스트 클릭 시에도 체크 가능

label for=input id

 

* span : 별 의미 없이 디자인 용으로 묶는 경우

* table 태그 사용 시 디자인적으로 보기 좋음

 

select

<select>

     <option value="실제전송되는값">내용</option>  

</select>

* selected 유저에게 보여지는 기본값 설정

textarea

<textarea rows="줄수" cols="칸수">

</textarea>

 

fieldset (박스 묶기)

<fieldset>
      <legend>제목</legend>
      <p>내용</p>
</fieldset>

 

 

 

* 아래는 실무에서 응용하는 법 :)

 

2021.04.08 - [코딩공부] - form: input, select, radio, textarea 와 label로 placeholder 대체하기