[HTML] form 태그 이해하기

form태그를 사용하는 이유?

action 속성에 사용자로부터 입력받은 데이터를 서버에 전송하기 위해서

 

---

input type의 종류

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

: The Input (Form Input) element - HTML: HyperText Markup Language | MDN

 

• text : 기본값, 한줄의 텍스트 입력칸을 만듦

<input type="text" name="name">

<!--기본값은 type, name 이다.-->

📌 type 속성, name 속성은 텍스트 필드뿐 아니라 모든 폼필드에서 사용됨

size	텍스트 필드의 크기를 지정할 수 있다. 미지정시 기본값은 20
maxlength	텍스트 필드에 입력할 수 있는 글자수의 최대값 지정(입력할 수 있는글자 값을 제한함)
value	텍스트 필드에 입력되는 기본값 지정 가능

 

---

 

• password : 텍스트 필드와 모양은 동일하나 입력값이 숨김처리된다(*** 또는 ㆍㆍㆍ)

---

 

• textarea : 여러줄에 걸쳐서 입력할 수 있는 폼필드

<textarea cols="30" rows="10">기본값</textarea>

너비와 높이 지정을 위해 rows, cols 속성 사용됨

++ 21.10.10 추가

textarea 의 사이즈를 고정시키기 위해서는 아래와 같은 CSS 를 추가한다.

resize: none;

 

---

 

• select : 콤보박스 또는 pull-down menus

option 태그에서 사용하는 value속성은 텍스트 필드에서의 value와 다르다.

텍스트 필드에서 value 속성에 값을 입력하면 기본값이지만 option 태그는 option 이 선택된 경우 전송되는 값을 지정하는 것이다.

 

📣 selected="selected" 속성을 사용시 선택된 값이 먼저 보인다.

<select name="year">
  <option value="" selected="selected">년도</option>
  <option value="2021">2021</option>
  <option value="2020">2020</option>
  <option value="2019">2019</option>
  <option value="2018">2018</option>
  <option value="2017">2017</option>
  <option value="2016">2016</option>
  <option value="2015">2015</option>
  <option value="2014">2014</option>
  <option value="2013">2013</option>
  <option value="2012">2012</option>
</select>

<!--<select>와<option>태그로 구성-->

---

 

• optgroup: 옵션을 카테고리로 묶을 수 있다.

<select name="skill">
  <optgroup label="markup">
    <option value="HTML5">HTML5</option>
    <option value="HTML4">HTML4</option>
    <option value="XHTML">XHTML</option>
    <option value="CSS3">CSS3</option>
  </optgroup>
  <optgroup label="script">
    <option value="JavaScript">JavaScript</option>
    <option value="jQuery">jQuery</option>
    <option value="VanillaJS">Vanilla JS</option>
  </optgroup>
</select>

 

---

 

• check box : 선택항목 중 다중선택이 가능하다.

<label for="apple">
  <input type="checkbox" id="apple" name="chk_info" value="apple">apple
</label>
<label for="banana">
  <input type="checkbox" id="banana" name="chk_info" value="banana">banana
</label>
<label for="watermelon">
  <input type="checkbox" id="watermelon" name="chk_info" value="watermelon">watermelon
</label>

📣for와 id값을 맞춰주어서 사용자의 편의성을 높여주어야 한다.

 

간혹가다 체크박스와 글씨가 정렬이 맞춰지지 않을때가 있는데 아래 참고.

https://blog.daum.net/0fantasy/54

input type=checkbox, radio 세로 정렬을 맞춰보자.

 

---

• radio box : 체크박스와 유사하지만 단일선택만 가능하다.

<input type="radio" name="gender" id="gender_m">
<label for="gender_m" class="gender">남자</label>
<input type="radio" name="gender" id="gender_w">
<label for="gender_w" class="gender">여자</label>

📌label for 와 input id를 같이 맞춰줘야 글씨를 클릭해도 박스 체크가 됨

📌name을 맞춰줘야 다중선택이 되지 않고 번갈아가며 체크할 수 있다.

 

이름을 맞춰주지 않으면 다중선택이 된다.

 

<input type="radio" name="chk_info" checked="checked" id="gender_m">
<label for="gender_m" class="gender">남자</label>
<input type="radio" name="chk_info" id="gender_w">
<label for="gender_w" class="gender">여자</label>

checked="checked"로 할 경우 남자에 체크가 되어 출력된다.

 

 

---

• reset button : 재설정, 초기화

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

---

• submit button : 전송버튼

<input type="submit" value="전송">

<!--form에 action 속성을 지정해야 전송 됨-->

 

---

• file : 파일첨부

<form action="" method="post" enctype="multipart/form-data" name="">
	<input type="file" name="FileName">
</form>

파일첨부 기능이 있는 폼을 만들때에는 form에 enctype 속성 ->enctype="multipart/form-data" 지정

---

• label 

: 사용자가 input box, check box, radio button 등을 더 쉽게 선택할 수 있도록 해준다.

 

- 화면리더기는 폼입력에서 label을 읽어서 보조기술 사용자가 입력해야 하는 텍스트가 무엇인지 쉽게 이해할 수

  있게 한다. 

- 관련 label을 클릭해서 input 자체에 초점을 맞추거나 활성화 시킬 수 있다. 활성화되어 늘어난 누를 수 있는

  영역(hit area)은 터치스크린 사용자를 포함해 입력하려는 사람에게 이점을 준다.

 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/label

 

방법1. 

<label>Do you like peas?
  <input type="checkbox" name="peas">
</label>

<!-- label 안에 input 태그를 중첩할 수 있다. 이때 for 및 id속성이 필요하지 않다 -->

방법2.

<label for="username">홍길동</label>
<input type="text" id="username">

📣for 와 id의 이름을 동일하게 맞춰주어야 label과 input이 연결된다

 

 

---

 

+21.10.18추가

• placeholder

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: red;
}
::-moz-placeholder { /* Firefox 19+ */
    color: red;
}
:-ms-input-placeholder { /* IE 10+ */
    color: red;
}
:-moz-placeholder { /* Firefox 18- */
    color: red;
}

가상선택자 앞에 -webkit-, -moz-, -ms- 등의 내용이 붙는다.

브라우저를 만드는 각 제조사에서 브라우저를 만들때 사용했던 엔진에서 placeholder를 바꾸는 방식을 결정하고 적용했을때 공통표준화가 되지 않아서 제조사별 브라우저에서 인식할 수 있도록 붙이는 프리픽스이다.

 

See the Pen 1018_form태그 이해 by limhaneul2244 (@limhaneul2244) on CodePen.

 

++21.12.29 추가

 

input[type=email] {
  color : grey
}

CSS에서 input요소를 찾을때 사용할 수 있다.

 

<input type="email" id="email" class="test" name="email" placeholder="email@example.com">

/*type : input의 타입*/
/*value : 미리 입력된 값*/
/*name : 서버 input개발에 필요한 input이름 설정 가능*/