[HTML][국비교육] Day 36

🔍 form 태그

➰ input 태그의 type 속성

• focus : 키보드 입력을 받아들일 수 있는 상태
• name : 요청데이터의 항목 이름을 설정
  • name 속성이 없는 입력창은 데이터를 전송(submit)할 수 없음
• id : 해당 HTML 문서 내에서 태그에 고유한 식별값(이름)을 설정
• <label> 태그 : "입력창"과 "설명 텍스트"를 연결하는 태그
  • "설명 텍스트"를 클릭하면 "입력창"으로 포커스가 넘어감
• required : 입력값 없이 submit이 안되도록 설정
  • submit할 때 필수입력값이라는 경고문구가 출력됨
  • 속성값을 적지 않아도 특성이 적용됨
    👉🏻 required만 적용하거나 required="required"로 적용
• checkbox
  • checked 하지 않고 submit을 하면 아예 전달데이터가 전달되지 않음
  • 체크된 항목의 값은 "on"을 기본으로 전달, value속성을 지정하면 지정된 값을 전달
  • ❗ 같은 name으로 지정된 체크박스들은 같은 카테고리로 표현됨 👉🏻 value 속성값을 각각 다르게 설정하도록
• radio : checkbox와 비슷한 동작을 함
  • ❗ 같은 name으로 설정된 radio들은 라디오 그룹(Radio Group)이 됨 👉🏻 라디오 그룹 내에서 한 개 항목만 선택할 수 있음
• button, 일반 버튼 : 주로 click을 감지하도록 작성
  • focus 상태에서 space bar를 눌러도 click으로 처리됨
• submit : <form>태그에서 작성된 데이터를 서버로 전송
  • 기본적으로 "제출"문구로 보이지만 value 속성값으로 변경할 수 있음
• reset : 초기화 버튼
  • 페이지 새로고침없이 입력된 창들을 초기상태로 되돌림
• <button> 태그 : 일반 버튼이 아닌 submit 버튼으로 만들어짐
  • type으로 submit, button, reset 설정 가능 👉🏻 기본값은 submit
• file : 선택된 파일의 이름만 전송
  • multiple 속성을 적용하면 다중 파일 선택 가능

✔ required, selected, checked, readonly, disable 👉🏻 속성의 존재 유무로만 설정항목이 되는 속성들
✔ <form>태그에 <input type="text">태그가 단독으로 존재할 때 엔터키 입력으로 submit 할 수 있음
✔ name 속성값과 id 속성값을 일반적으로 똑같은 문자로 설정 👉🏻 두 속성의 역할/목적 구분 철저히!

➰ form의 자식태그

• <datalist>
<datalist> 태그는 화면에 보이지 않음 👉🏻 <option> 항목들을 <input>태그의 자동완성 목록으로 보여줌
  • <option> : datalist의 자식태그로, 선택항목이 됨
    • value 속성이 적용되면 value 속성값으로 입력되고, value가 없으면 innerHTML 값으로 입력됨
• <textarea>
  • value 속성이 없음 👉🏻 표준 속성이 아님
  • innerHTML을 이용하여 전송데이터를 설정, 입력기본값도 설정할 수 있음

<datalist id="fruits">
	<option>사과</option>
	<option value="banana">바나나</option>
	<option value="체리">
</datalist>

<input list="fruits" name="f">


<label for="content">본문</label><br>
<textarea rows="5" cols="3" name="content" id="content"
placeholder="본문을 입력하세요">AppleBAnanaCherry</textarea>

• <fieldset>, <legend>

<fieldset style="width: 270px";>

  <legend>사용자 정보</legend>

  <label for="userid">아이디</label> 
  <input type="text" name="userid" id="userid"><br> 

  <label for="userpw">패스워드</label> 
  <input type="password" name="userpw" id="userpw"><br>

</fieldset>

/* 테이블 버전 */
<table>

<tr>
	<td><label for="userid">아이디</label></td>
	<td><input type="text" name="userid" id="userid"></td>
</tr>

<tr>
	<td><label for="userpw">패스워드</label></td>
	<td><input type="password" name="userpw" id="userpw"></td>
</tr>

<tr>
	<td colspan="2" style="text-align: center;"><input type="submit" value="전송"></td>
</tr>

</table>