form

🐠 form tag

• <form>태그는 사용자로부터 입력 받을 수 있는 html 입력 폼(form)을 정의할 때 사용.(<form>태그는 전체 양식을 의미하며, 화면에 보이지 않는 추상적인 태그다. 따라서 실제로 사용자가 양식을 입력하기 위한 태그는 <input> 태그 등이 사용된다.)
• <form>태그는 웹 페이지에서의 입력 양식 전체를 감싸는 태그를 의미.
  (ex.로그인 창, 회원가입 폼 등)
• form은 컨트롤 요소(control element)로 구성된다. 텍스트 필드에 글자를 입력하거나, 체크박스나 라디오 버튼을 클릭하고 제출 버튼을 누르면 백엔드 서버에 양식이 전달되어 정보를 처리하게 된다.

💡 form에 사용되는 속성

action : 폼을 전송할 서버 쪽 스크립트 파일을 지정한다.
name : 폼을 식별하기 위한 이름을 지정한다.(=id)
accept-charset : 폼 전송에 사용할 문자 인코딩을 지정한다.
method : 폼을 서버에 전송할 http 메소드를 정한다. (GET 또는 POST)
autocomplete: 폼 요소에서 자동 완성 기능을 사용할지 여부를 명시(on 또는 off)
target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정함. (_blank, _self, _parent, _top)

<form action = "http://localhost:8080/form.jsp" accept-charset="utf-8" 
      name = "form1" method = "get" target="_blank"> 
  <input type="text" />
</form>

💡 내부태그 종류

<input>
사용자가 양식을 입력하기 위한 태그 (한 줄만 입력 가능, 스스로 닫는 태그)
<textarea>
사용자가 양식을 입력하기 위한 태그 (긴 내용 입력 가능)
<select>
사용자가 폼(form)에서 선택할 수 있는 옵션의 목록(드롭다운 리스트)을 보여주는 태그.
<fieldset>
fieldset 요소는 폼 요소들을 그룹화 하는데 사용하며, 해당 그룹의 이름은 legend 요소로 지어진다.
<button>
button 형태를 나타내는 태그 (input ▶submit, reset, button 타입과 동일한 출력결과 / 대체 가능)
<optgroup>
option 요소들을 그룹화 해주는 요소. label 속성으로 그룹의 명칭을 지어주며, disabled속성으로 해당 그룹으로 묶인 option들을 비활성화 할 수 있다.

<label>
✅ label tag란, form 양식에 이름 붙이는 태그(label 태그는 입력 양식창(input, button, textarea 등)을 설명하는 이름표)
✅ label 태그에 적힌 텍스트를 선택하면, label과 연결된 입력 양식창이 선택된다(클릭영역이 label 영역까지 확대)

ex)체크박스를 예로 들면, 클릭영역이 단순 체크박스 영역에 국한된 것이 아니라 체크박스가 가리키는 툴팁영역에도 클릭시 input 태그가 함께 체크될 수 있다. 또한 만약 label이 없이 input 태그만 클릭하여 선택하는 경우, input 태그 자체는 영역이 작아 클릭하기 어렵거나 서로 다른 위치의 input 태그를 제어하려면 부득히 복잡한 스크립트를 사용해야할 수도 있다. label 태그는 이런 점으로부터 자유롭고 매우 편리하게 사용할 수 있는 방법이다.

✅ label태그 속성
for : label태그와 입력양식창을 연결할때 사용. 연결한 입력 양식창의 id를 사용하여 연결한다.(이때 for와 id는 함께 동작한다)

// 예시(1) label태그와 input태그 연동하기(for, id)
<form action = "http://localhost:8080/form.jsp" accept-charset="utf-8" 
      name = "form1" method = "get" target="_blank"> 
  <label for="fruitItem">여기를 클릭하시오</label>
  <input id="fruitItem" type="checkbox" />
</form>



// 예시(2) label 태그 안에 input 위치시키기
<form name="fruitItem">
<ul>
  <li>
    <lable><input type="checkbox"/> 바나나 </label>
  </li>
  <li>
    <lable><input type="checkbox"/> 사과 </label>
  </li>
</ul>
</form>



// 예시(3) label 태그 안에 다수의 input 태그가 존재하는 경우에는 '맨 위에 위치한 요소만 클릭된다'
<label>
  <input type="checkbox" /> 바나나<br />
  <input type="checkbox" /> 사과
</label>

🐬 input 태그

👉 type 속성을 통해 종류(입력형식, checkbox, button등)를 나타내며, name을 통해 데이터의 이름(id의 기능을 함), value를 통해 기본 값을 지정한다.
.
👉<input> type 속성 종류
▶ text: 일반 문자

<input type="text" value="hihi"/>

▶ password: 비밀번호

<input type="password" value="1234"/>

▶ button: 버튼

<input type="button" value="누르기"/>

▶ submit: 양식 제출용 버튼

<input type="submit" value="제출"/>
<!--현재 이 요소가 속해져 있는 form을 제출하는 역할이며, value 속성이 버튼의 이름이 된다. 
(button 태그로 대체될 수 있다)-->

▶ reset: 양식 초기화용 버튼

<input type="reset" value="reset"/>

▶ radio: 한개만 선택할 수 있는 컴포넌트
여러개의 라디오 버튼이 있을 때, 모두 연결되어 있도록 묶기 위해 name을 같게 설정해야 한다 -> 3개 버튼 중 1개만 클릭 가능해진다(name을 같게 설정하지 않으면 3개 모두 선택됨)

<input type="radio" name="radiobtn"/>
<input type="radio" name="radiobtn"/>
<input type="radio" name="radiobtn"/>

<input type="radio" name="color"/>빨간색<br>
<input type="radio" name="color" checked />파란색

<label for="radio1">radioButton <input id="radio1" type="radio"/>
</label>

▶ checkbox: 다수를 선택할 수 있는 컴포넌트

<input type="checkbox" value="radio"/>
<input type="checkbox"/>
<input type="checkbox"/>

<label for="checkbox1">checkboxButton <input id="checkbox1" type="checkbox"/>  <input id="checkbox1" type="checkbox"/>
</label>
<!--체크박스 타입은 하나를 선택할 수도 안 할 수도 있다. 
(⇔ radio 타입: 반드시 하나를 선택해야 하는 형태) -->

▶ file: 파일 업로드

<input type="file"/>

▶ hidden: 사용자에게 보이지 않는 숨은 요소

<input type="hidden"/>

🐟 input 요소의 속성

① disabled 속성
👉 모든 타입 공통 속성 ( input 요소 외 모든 폼 요소들이 사용 가능한 속성 )
👉 해당 폼 요소를 비활성화 시킨다.
👉 disabled 속성은 불리언(boolean) 속성이다. 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 된다.
👉 disabled 속성이 명시된 < input> 요소는 사용할 수 없다(클릭, 폼 데이터 제출 등 불가). 따라서 이 속성을 사용하면 특정 조건이 충족될 때까지 사용자가 입력 필드를 클릭할 수 없도록 설정하고, 특정 조건이 충족되면 js 등으로 disabled 속성값을 삭제하여 사용자가 입력 필드를 다시 사용할 수 있도록 조절할 수 있다.

<form>
  이름 : <input type="text" name="st_name"><br>
  학번 : <input type="text" name="st_id"><br>
  학과 : <input type="text" name="department" disabled><br>
  <input type="submit">
</form>

② readonly 속성
👉 type = "text" 또는 textarea 요소에 사용되는 속성
👉 폼 안의 텍스트를 수정할 수 없고 오직 읽을 수 만 있다

<form>
  이름 : <input type="text" name="st_name"><br>
  학번 : <input type="text" name="st_id"><br>
  학과 : <input type="text" name="department" readonly><br>
  <input type="submit">
</form>

③ size 속성 (type = "text" 에만 사용되는 속성)
👉 type = "text" 에만 사용되는 속성
👉 textarea 의 cols속성처럼, 글자수를 기준으로 너비를 지정한다. (속성은 CSS로 처리 가능)

<form>
  주소 : <input type="text" name="address" size="40"><br>
  우편번호 : <input type="text" name="zipcode" maxlength="5" size="5"><br>
  <input type="submit">
</form>
<!--maxlength 속성을 사용하면, <input> 요소에서 허용되는 최대 문자수를 명시할 수 있다-->

④ maxlength 속성
👉 type = "text" 에만 사용되는 속성
👉 글자 수 제한으로 속성값으로 지정된 숫자 이상은 넣을 수 없도록 만들어준다.
.
⑤ checked 속성
👉 type = "checkbox" 와 type="radio"에만 사용되는 속성
👉 기본 값으로 선택되도록 보여준다 ('아니오' 태그에 checked를 선택함으로써 기본적으로 '아니오'에 체크되어 보여진다)
👉 checked 속성은 불리언(boolean) 속성이다

<form>
  가장 좋아하는 과일을 고르세요.<br>
   <input type="radio" name="fruit" value="strawberry"> 딸기<br>
   <input type="radio" name="fruit" value="watermelon"> 수박<br>
   <input type="radio" name="fruit" value="banana" checked> 바나나<br>
   <input type="submit">
</form>

🐙 select, option

1️⃣ <select>는 드롭다운 리스트(사용자가 폼에서 선택할 수 있는 옵션의 목록을 보여주는 폼 요소)를 만드는 태그, <option>을 통해 선택 항목을 지정한다.
2️⃣ 라디오 타입의 인풋(input[type=radio])과 비슷한 역할을 가지고 있지만, 라디오 타입의 input은 모두 다 펼쳐 보여지는 반면, 이 select 요소는 옵션들은 모두 숨기고 선택된 한 가지만 보여 준다. 그리고 여러 개를 선택할 수도 있다(multiple 속성 이용할 경우).
3️⃣ select 요소는 내부에 한 개 이상의 option 요소를 가지고 있다. 사용자는 option을 선택하고, 선택된 option요소의 값이 서버에 전송 된다.

<lable for="select-id"> 점수선택 </label>
<select name="score" id="select-id">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

🐡 select 요소의 속성

① multiple 속성
👉 기본적으로 select 요소는 option을 한 개만 선택할 수 있다. 하지만 이 multiple 속성을 줄 경우, 사용자가 값을 여러 개 선택할 수도 있게 되며, 선택 시에는 Ctrl키나 Shift 키를 누르면서 선택하거나, 마우스로 드래그를 해서 선택할 수 있다.
👉 Bullean 속성이다.

<select multiple="multiple">
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="O">Orange</option>
</select>
<!--Ctrl이나 Shift키를 누른채 선택하면 여러 개를 선택할 수 있다-->

② size 속성
👉 이 속성은 option을 몇 개를 보여줄지 정하는 속성. 기본적인 select 요소의 노출 수는 1개, multiple 속성이 있는 경우 4개가 기본 값이다.

<select size="4">
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="O">Orange</option>
  <option value="P">Pear</option>
  <option value="M">Mango</option>
</select>

③ option 요소의 속성과 optgroup
👉 이 option 요소는 자신의 내부에 다른 요소를 포함할 수 없고, 오로지 텍스트만을 포함할 수 있다.
👉 disabled 속성을 사용할 수 있으며, selected 속성이 있을 경우, select의 기본 선택된 옵션으로 지정.

<select>
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="O" selected="selected">Orange</option> <!-- 옵션 기본 선택 -->
  <option value="P" disabled="disabled">Pear</option> <!-- 옵션 비활성화 -->
  <option value="M">Mango</option>
</select>

👉 optgroup 요소는 option 요소들을 그룹화 해주는 요소. label 속성으로 그룹의 명칭을 지어주며, disabled속성으로 해당 그룹으로 묶인 option들을 비활성화 할 수 있다.

<select>
  <optgroup label="Red">
    <option value="A">Apple</option>
  </optgroup>
-
  <optgroup label="Yellow" disabled="disabled"> <!-- 그룹 비활성화 -->
   <option value="B">Banana</option>
   <option value="O">Orange</option>
   <option value="M">Mango</option>
  </optgroup>
-
  <option value="P">Pear</option>
</select>

🐳 textarea

👉 높이와 너비를 가진 글 박스(긴 내용 입력 가능)
👉 속성 지정 필수 → cols (너비) , rows (높이)
❗ 위 속성 정보는 'width', 'height'가 아닌 입력되는 글자를 기준으로 하기 때문에 cols 와 row의 속성 사용
👉 cols(너비) = 한 줄에 몇 글자까지 들어가는지 지정
ex) cols="40" (너비 40글자까지 지정)
👉 rows(높이) = 높이가 몇 줄로 나타날지 지정
ex) rows="5" (높이 5줄까지 지정)
👉 내용에는 줄바꿈, 여러번의 공백, 태그 등 모두 인식한다.

<label for="story"> 신데렐라: </label>
<textarea id="story" name="story"
          rows="5" cols="33">
옛날옛날에 신데렐라가 살았어요.
신데렐라는...
</textarea>