[HTML 04] form / input / datalist / select / fieldset 태그

🔵 form

입력한 데이터를 서버로 전송할 때 사용하는 태그
<submit> 버튼이 있어야만 전송이 가능

form 의 속성:

• <action> : form이 submit되었을 때 데이터를 전달할 서버 이름 명시

• <method>
  GET 방식 : 전송하는 내용이 url 에 나타남
  POST 방식 : 전송하는 내용이 url에 나타나지 않음 (회원가입 등에 사용)

<form action="" method="post">
	<input type: "text" name="id" value""/>
</form>

🔵 input

서버로 보낼 내용을 입력 받을 때 사용하는 태그 (폼의 컨트롤 요소 생성)

input 의 속성:

<type: > : input 태그의 유형 (모양과 속성들을 변경시킨다)

<name: > : 서버로 보낼 때 보낼 값(value) 에 대한 이름을 의미한다.
* 보낼 값(value)에 대한 항목
* 폼(form)이 제출될 때 서버에서 폼 데이터(form data)를 참조하기 위해 사용
* 자바스크립트에서 요소를 참조하기 위해 사용

<value: > : 입력 필드의 초기값으로 서버로 보내지거나 사용자에게 보여질 값이다.
* 지정 안하면 생략 가능
* 보내는 항목(name)에 대한 값
* Button 이나 submit 의 value 는 보여지는 값이다.

<placeholder: > : 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말 (사용자가 입력을 시작하면 자동으로 사라짐)

<input type: > 의 속성값:

• text
  한 줄 입력 필드
  input의 default 값 (자동으로 할당되는 값)

<input type="text" name="id" value="" placeholder="아이디를 입력 하세요"/>

• password
  text 속성과 같지만 *로 표시 (암호화된 값 입력시 사용)

<input type="password" name="pw" placeholder="비밀번호를 입력 하세요"/>

• hidden

성 : <input type="hidden" name="first_name" value="kim"/>

• button
  버튼 생성, 어떤 이벤트를 발생 시킬 때 사용

<input type="button" value="회원가입"/>

• email
  올바른 이메일 주소가 입력되었는지 알려줌 (@가 포함되었는지)

<input type="email" name="email"/>

• radio
  선택 항목 중 1가지만 선택할 수 있는 라디오 버튼

<input type="radio" name="gender" value="남" checked/> 남자
<input type="radio" name="gender" value="여"/> 여자

• checkbox
  선택 항목 중 여러개를 선택할 수 있는 체크박스

<input type="checkbox" name="hobby" value="drive"/> 드라이브
<input type="checkbox" name="hobby" value="sports"/> 스포츠

• number
  숫자만 받고 범위 지정 가능 (min, max 사용)

<input type="number" name="age" min="19" max="29"/>

• date & month

date : <input type="date"/> <br/>
month : <input type="month"/>

• range
step 을 추가하면 지정한 숫자 만큼만 슬라이드 바가 움직임
  선택하며 취소 불가능

<input type="range" name="secure" min="0" max="10" value="5" step="5"/>

• file
  파일 첨부 기능

<input type="file" name="photo"/>

• submit
  자료를 서버로 보내는 버튼

<input type="submit" value="회원가입"/>

🔵 datalist & input list

• <input>태그의 list 속성값과 <datalist>태그의 id 속성값을 같게 해주어 데이터를 연결시킬 수 있다.
• list와 id이름은 동일하게 한다.

<input list="browser" name="browser"/>
<datalist id="browser">
	<option value="IE">익스플로어</option>
    <option value="firefox">파이어폭스</option>
    <option value="chrome">크롬</option>
    <option value="opera">오페라</option>
    <option value="safari">사파리</option>
</datalist> 

🔵 select

기본적으로 최상단의 option이 선택되어 나타난다.
selected: 기본값으로 설정해준다.

<select name="cars">
	<option value="volvo"> 볼보 </option>
    <option value="benz"> 벤츠 </option>
    <option value="bmw" selected> BMW </option>
    <option value="audi"> 아우디 </option>
</select>

🔵 fieldset

• fieldset: 특정 영역을 구분하고 싶을 때
• legend: fieldset에 제목을 넣고 싶을 때

<fieldset>
	<legend> text & password</legend>
    ID : <input type="text" name="id" value="" placeholder="아이디를 입력 하세요"/>
    PW : <input type="password" name="pw" value="" placeholder="비밀번호를 입력 하세요"/>
    <input type="submit" value="login"/>
</fieldset>

결과:

---

더 많은 속성들이 있지만, 자주 사용하는 속성과 태그 위주로 정리했다.