Form

일반적으로 html의 <태그>는 웹 사이트가 사용자에게 "정보의 의미"를 전달할 수 있게 해준다. 이와 달리 form은 웹 사이트가 사용자로부터 정보, 즉 input을 받고싶을 때 사용하는 태그이다.

Attribute

반드시 태그에 포함되어야 하는 속성 값으로는 action과 method가 있다.

 

  <form action="" method="GET"></form>

 

사용자로 부터 받아들인 input을 어디에 저장할 것인지를 action 속성의 값으로 지정하는데, API 주소가 이에 해당한다. method는 HTTP method로 GET과 POST 중 하나를 사용한다.

 

+) html form 태그의 method 속성값

 

Form의 자식 요소 | Field

1. input

type = text

<input 
   type="text" 
   placeholder="안내문구 => 텍스트를 입력하세요" 
   value="init 값 => 기본 텍스트"
   maxlength="13"
   minlength="5"
   required
/>

<input 
   type="number" 
   placeholder="나이를 입력하세요(18~120세)" 
   max="120"
   min="18"
   step="1"
   required
/>

 

• input type="text" | 사용자에게 input을 받는 가장 일반적인 방법으로, type 속성을 반드시 필요로 한다. 가장 흔한 type의 값은 one line text를 받을 수 있는 text이고, 다음과 같이 자주 사용된다. text를 구체적으로 정의하고 싶을 때에는 number, email, password, url, tel... 등을 type 속성의 값으로 설정하면 된다.
  • required 속성을 주면, 아무런 input을 받지 않은 상태에서는 form을 제출할 수 없다는 경고 메세지를 띄워준다.
  • disabled 속성을 주면, 사용자가 input을 입력하지 못하도록 설정할 수 있다. ??? 이런 속성은 언제 사용하는 건가

type = file

• input type="file" | 사용자가 컴퓨터에 저장된 파일을 선택할 수 있고, accept 속성을 이용해서 제출할 수 있는 파일의 형식을 제한할 수 있다.
  • accept="image/*"는 모든 image 파일을 input으로 받을 수 있다

type = radio

<!-- radio -->
<form action="" method="GET">
    <input 
      type="radio" 
      id="subscribe" 
      name="sub"
      value="true"
    />
    <label for="subscribe">구독</label>
    <input 
      type="radio" 
      id="un_subscribe" 
      name="sub"
      value="false"
    />
    <label for="un_subscribe">미구독</label>
    <button type="submit">submit</button>
</form>

 

• input type="radio" | 여러 개의 항목 중 하나의 값을 선택해서 제출할 수 있다. 
  
  • lable 태그의 for 속성은, input 등의 태그의 id 속성과 연결되어, lable 요소를 클릭했을 때 해당하는 input 요소가 포커스 상태가 되도록 만든다.
  • name과 value는 서버에 제출되는 데이터의 형식과 관련있다.
    
    • radio type에서는 다음과 같이 동작한다. 
    • => name="sub" 라는 속성을 이용하면 구독과 미구독을 선택하는 radio가 하나의 그룹으로 묶이기 때문에, 둘 중 하나의 값만 선택할 수 있게 된다.
    • => 사용자가 구독/미구독 중 하나의 값을 선택한 뒤에 form을 제출하면, sub="true" 또는 sub="false"가 서버에 전달된다. 만약 value를 지정하지 않았다면, 어떤 값을 선택했든지 간에 sub=on이 서버에 추가된다.

+) 하나의 form에 여러 input이 존재할 때, 각 input의 name을 category[name]과 같이 지정해서 서버에 전달되는 데이터를 그룹화할 수 있다. => ex) campgrounds[location], campgrounds[rating]

 

type = checkbox

<form action="" method="GET">
    <input 
      type="checkbox" 
      id="html" 
      name="skills"
      value="html"     
    />
    <label for="html">HTML</label>
    <input 
      type="checkbox" 
      id="css" 
      name="skills"
      value="css"
    />
    <label for="css">CSS</label>
    <button type="submit">submit</button>
</form>

 

• input type="checkbox"| 여러 개의 항목 중 하나의 값을 선택해서 제출할 수 있다. 
  • checkbox와 radio 타입의 사용방법은 완전히 같으나, 다중 선택을 할 수 있느냐, 없느냐에 차이가 있다.

type=date

• min="yyyy-mm-dd" 형식을 이용해서 날짜의 최소값/최대값을 설정할 수 있다. 

2. label | ✅lable이 아니라 label임

<input type="text" id="user_name" />
<label for="user_name"> label을 지정할 수 있다 </label>

 

label | input 태그와 함께 사용되는 태그로, input의 이름을 나타낸다. 어떤 input의 이름을 나타내는지를 위해 for 속성 값으로 해당 input의 id를 지정해야 한다 (이 때에는 #을 사용하지 않는다).

 

+) label과 input 태그를 위와 같이 연결해 두면, 사용자가 label을 클릭 했을 때에도 input에 값을 입력할 수 있는 상태(포커스 상태)가 된다.

 

3. select & option

<label for="skill">skill</label>
<select name="skill" id="skill" multiple>
  <option value="html" selected>HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

<label for='cars'>Choose a car:</label>
<select name='cars' id='cars' value="기본으로 선택될 값을 여기서 정할 수도 있음">
  <option value='volvo'>Volvo</option>
  <option value='saab'>Saab</option>
  <option value='opel'>Opel</option>
</select>

 

• select | pulldown 형태로 특정 값을 선택할 수 있게 만들어 준다.
  • select에 multiple 속성을 추가하면, ctrl(cmd)을 누른 상태에서 다중 선택이 가능하다.
• option | select의 자식 요소로, 값에 해당한다.
  • selected 속성을 사용하면, 해당 option이 기본으로 선택된다. 

4. textarea

<input type="text" placeholder="이름을 입력하세요"/>
<textarea placeholder="자기소개를 2000글자 이내로 작성하세요" maxlength="2000"></textarea>

 

textarea | multiple lines text를 input으로 받아와야 할 때 사용할 수 있다. rows(몇 줄을 인풋으로 받을지), cols, maxlength 속성 등을 지정할 수 있다.

5. button

<button type="button">button</button>
<button type="submit">submit</button>
<button type="reset">다시 작성하기, 자주 사용하지는 않는다</button>

 

button | 요소에 클릭 이벤트가 발생하면, 어떤 일을 처리할 수 있다. type이라는 속성을 반드시 지정해 주어야 하고, 속성 값에는 button, submit, reset이 있다.

 

+) form을 제출하는 버튼에는 submit 값을 자주 사용한다.