폼(form) 관련 요소

<form> : 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획

<form action="" method="">
	<input type="text" name="test">
    <button type="submit">제출</button>
</form>

form 속성

action="https://example.com/join"

• action 속성은 정보를 보내줄 경로를 입력

method="post / get"

• get : url 뒤에 전송 된 값이 보여진다. ( 보안 취약 )
  

• post : url에 전송 된 값 노출x
  
  

form 내부 주요 태그

<fieldset>

• 여러 컨트롤과 레이블(label)을 묶어주는 태그
• 전체영역을 컨트롤 할 수 있다. (disabled)

<legend>

• fieldset(첫번째 요소로 작성)으로 묶인 요소들의 제목을 넣어주는 태그

<label>

<label for="example_label"> 예시 : </label>

• 라벨링(설명)을 작성하는 태그

<input>

<input type="text" name="example" id="exmample_label"> 예시 : </input>

• tpye="" 속성을 통해 다양한 값을 입력받는 태그
  

• label 태그와 input 태그를 형제 요소로 사용 시 <label> for="" 속성과
  <input> id="" 속성을 같은 값을 주어 연결하여 사용

• input 태그를 label의 자식 요소로 사용 시 for="" id=""속성 없이 사용 가능
  

input 태그의 유형

type="" 의 속성값에 따라 다양한 기능과 속성을 가진다.

<input type="text">

• type="text" : minlength="" 최소값 maxlength="" 최대값

<input type="password">

• type="password" : 화면에선 마스킹 처리, 전송 된 값은 보여짐
  

<input type="email">

• type="email" : @의 이메일 형식인지 확인

<input type="tel">

• type="tel" : 모바일 화면에서의 자동 숫자 키보드 노출

<input type="number">

• type="number" : 숫자만 입력받는 타입

<input type="range">

• type="number" : 0~100의 범위 값을 선택하게 해주는 타입

<input type="date">

• type="date" : 달력을 통해 시간을 제외한 날짜 선택 가능

<input type="time">

• type="time" : 시간을 선택할 수 있는 타입

<input type="submit" value="제출하기">

• type="submit" : 제출하기, value 속성으로 버튼 내용 수정 가능

<input type="reset" value="초기화">

• type="reset" : form 내부 입력 값 초기화, value 속성으로 버튼 내용 수정 가능

<input type="button" value="빈 버튼">

• type="button" : 버튼 형태, value 속성으로 버튼 내용 수정 가능

<input type="checkbox" name="chk1" checked>

• type="checkbox" : 체크박스 형태, checked -> 초기 상태 체트 값

<input type="radio" name="radio" value="r1">
<input type="radio" name="radio" value="r2">

• type="radio" : 체크박스 형태, value 로 구분
  
  

type 외 속성

• name="" : 폼 데이터 상에서 구분할 수 있는 이름
• placeholder="" : 입력 받을 값에 대한 힌트
• autocomplete="on" : 자동 완성 기능 온/오프
• required : null 값일 시 제출을 막고 입력하세요 메시지 표시
• disabled : input 자체를 비활성화 시켜주는 속성
• readonly : 읽기만 가능함
• min="" : type="number/range"의 숫자의 최소값 제한
• max="" : type="number/range"의 숫자의 최대값 제한
• step="2" : type="number/range"의 사이드바 수치 조절
  
  

<button> 태그

<button type="">버튼내용</button>

• type="reset/submit/button"
• input button과 달리 내부 요소를 넣을 수 있음 ( 스타일링 용이 )
• 접근성을 고려해야 함
  
  

<select> 태그

<select id="",name="">
	<option value="">선택해주세요</option>
    <optgroup label="제목1">
		<option value="1">선택1</option>
    	<option value="2">선택2</option>
    </optgroup>
    <optgroup label="제목2">
		<option value="3">선택3</option>
    	<option value="4">선택4</option>
    </optgroup>
</select>

• 빈 값을 주려면 ""를 value에 넣어주면 됨
• selected 속성으로 최초 선택 가능
  
  

<datalist> 태그

<label for="movie"> 영화 </lavel>
<input type="text" id="movie" list="movie-list">
<datalist id="movie-list">
	<option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</datalist>

• 텍스트를 수정 가능, 추천의 기능
• input에 list 속성으로 연결하여 사용
  
  

<textarea> 태그

<label for="comment">댓글</label>
<textarea name="comment" id="comment" rows="3" cols="10">
오늘은...
</textarea>

• <pre> 태그처럼 내부 요소 그대로 출력
• rows/cols 높이 너비 지정 가능