[HTML] HTML - 17.Form요소

이번 시간에는 웹 페이지에서 사용자의 입력을 받는

Form 요소에 대해 알아보도록 하겠습니다.

 

Form 요소

웹 페이지에서 form 요소를 사용해 

사용자로부터 입력을 받을 수 있습니다.

 

또한, 사용자가 입력한 데이터를 서버로

보낼 시에도 form 요소를 사용합니다.

 

form 요소는 다음과 같은 문법을 사용합니다.

<form action="처리할페이지주소" method="get|post"></form>

action 속성은 입력받은 데이터를 

처리할 서버 상의 스크립트 파일의 

주소를 명시합니다.

 

이렇게 전달받은 데이터를 처리하는 

스크립트 파일을 폼 핸들러(form-handler)

라고 합니다. 

 

method 속성에는 입력받은

데이터를 서버에 전달하는 방식을

명시합니다.

 

따라서 사용자가 form 요소를 통해

입력한 데이터는 action 속성에 

 

명시된 위치로 method 속성의 방식을 

통해 전달됩니다.

---

method 속성

 

method 속성을 통해서 명시할 수 있는

form 요소의 전달 방식으로는 

 

GET 방식과 POST 방식으로 나뉩니다.

GET 방식은 주소에 데이터(data)를 추가해

전달하는 방식입니다.

 

따라서 주소 입력창에 그대로 나타나고

전송할 수 있는 데이터의 크기 또한

제한적 입니다. 

 

POST 방식은 데이터(data)를 별도로

첨부해 전달하는 방식입니다.

 

데이터가 외부에 드러나지 않고,

전송할 수 있는 데이터의 크기 또한 

제한이 없습니다.

 

따라서 보안성 및 활용성은 

GET 방식보다 좋습니다.

---

다양한 타입의 input 요소

 

HTML에서는 다양한 타입의 

input 요소를 사용해 사용자로부터 

입력을 받을 수 있습니다.

 

HTML에서 사용할 수 있는

대표적인 input 요소의 타입은

다음과 같습니다.

 

• 텍스트 입력(text)
• 비밀번호 입력(password)
• 라디오 버튼(radio)
• 체크박스(checkbox)
• 파일 선택(file)
• 선택 입력(select)
• 문장 입력(textarea)
• 버튼 입력(button)
• 전송 버튼(submit)
• 필드셋(fieldset)

---

 텍스트 입력

 

 <input>태그의 type 속성값을 "text"로

설정하면 사용자로부터 한 줄의

텍스트를 입력받을 수 있습니다.

<form action="/examples/media/request.php">
      검색할 내용을 입력해주세요
    <input type="text" name="search">
</form>

위 예제처럼 form 요소 그 자체는 

웹 페이지상에서 나타나지 않습니다.

 

하지만 form 요소에 포함된 다양한 

input 요소를 통해 사용자의 입력을 

받을 수 있습니다.

---

비밀번호 입력

 

<input> 태그의 type 속성값을

"password"로 설정하면, 사용자로부터

비밀번호를 입력받을 수 있습니다.

 

비밀번호를 입력받기 때문에 

화면 상에서는 입력받은 문자나 숫자 대신 

별표나 작은 원 모양이 표시됩니다.

<form>
    사용자: <br><input type="text" name="username"> <br>
    비밀번호: <br><input type="password"  name="password">
</form>

---

라디오 버튼

 

<input>태그의 type 속성값을 "radio"로

설정하면 사용자로부터 여러개 옵션 중 

단 하나의 옵션만을 입력받을 수 있습니다.

 

이때 서버로 정확한 입력을 전송하기 위해

반드시 모든 input 요소의 name 속성 값이

같아야 합니다.

<form>
     <input type="radio" name="lecture" value="html" checked> HTML <br>
     <input type="radio" name="lecture" value="css"> CSS <br>
     <input type="radio" name="lecture" value="javascript"> Javascript <br>
     <input type="radio" name="lecture" value="cpp"> C++
</form>

checked 속성을 이용하면 여러 개

옵션 중에서 처음에 미리 선택되는 

옵션을 지정할 수 있습니다. 

 

정확한 입력값을 전송하기 위해

radio type은 모든 input 요소가 반드시

같은 name 속성을 가져아 합니다.

---

체크박스

 

<input> 태그 type에 "checkbox"로

설정 시 사용자로부터 여러 개의 옵션 중 

다수의 옵션을 입력받을 수 있습니다.

 

체크박스는 라디오 버튼과 달리 

여러 개의 옵션을 한 번에

입력 받을 수 있습니다.

 

이때 서버로 정확한 입력을 

전송하기 위해 반드시 input 요소의

name 속성이 같아야 합니다. 

<form> 
   <input type="checkbox" name="lecture" value="html" checked> HTML <br>
   <input type="checkbox" name="lecture" value="css"> CSS <br>
   <input type="checkbox" name="lecture" value="javascript"> Javascript <br>
   <input type="checkbox" name="lecture" value="cpp" disabled> C++ 
</form>

checked 속성을 이용해 여러 개의 

옵션 중 처음에 미리 선택되는 옵션을 

지정할 수 있습니다.

 

또, disabled 속성을 이용해 

해당 옵션을 선택할 수 없게 설정할 수

있습니다.

---

파일선택

 

<input> 태그의 type 속성값을 "file"로 

설정하면, 사용자로부터 파일을 

전송받을 수 있습니다.

<form>
   <input type="file" name="upload_file" accept="image/">
</form>

accept 속성을 이용해 입력받을 수  

있는 파일의 확장자 및 종류를 

명시할 수 있습니다.

---

선택 입력

 

select 요소는 여러 개의 옵션이

드롭다운 리스트(drop-down-list)로

 

되어 있으며 그 중 단하나의 옵션만을 

입력받을 수 있습니다.

 

option 요소는 드롭다운 리스트에 

선택 받을 수 있는 각각의 옵션을 

명시합니다.

 

 

selected 속성을 이용해 

드롭다운 리스트 중 처음에 미리 

선택되는 옵션을 지정할 수 있습니다.

<select name="fruit">
    <option value="apple">사과
    <option value="orange" selected> 오렌지
    <option value="melon"> 멜론
    <option value="mango"> 망고 
</select>

selected 속성을 이용해 드롭다운

리스트 중 처음에 미리 선택되는 

옵션을 지정할 수 있습니다.

---

문장 입력

 

textarea 요소는 사용자로부터

여러 줄의 텍스트를 입력 받을 수 

있습니다.

 

rows 속성과 cols 속성을 이용해

textarea 요소의 크기를 자유롭게

지정이 가능합니다. 

<textarea name="message" cols="30" rows="5">
        문장을 입력하세요
</textarea>

rows 속성과 cols 속성을 사용해 

textarea 요소의 크기를 자유롭게 

지정할 수 있습니다.

---

버튼

 

button 요소는 사용자가 누를 수 있는

버튼을 나타냅니다.

<button type="button" onclick="alert('버튼이 클릭되었습니다')">
  버튼 클릭
</button>

alert 요소는 해당 컴포넌트를 클릭시

나타나는 알림창 기능 입니다.

---

전송 버튼

 

<input> 태그의 type 속성을 "submit"

으로 설정하면 사용자로부터 입력받은

 

데이터(data)를 서버의 폼 핸들러로 

제출하는 버튼을 만들 수 있습니다.

 

폼 핸들러(form-handler)란 입력받은 

데이터를 처리하기 위한 서버 측의 

웹 페이지를 의미합니다.

 

이러한 폼 핸들러의 주소는 

form 요소의 action 속성을 이용해

명시할 수 있습니다.

<form action="https://koras02.tistory.com">
   본인의 어릴때 추억의 만화는?: <br>
   <input type="text" name="question" value="만화"><br><br>
   <input type="submit" value="전송하기">
</form>

---

필드셋(fieldset)

 

fieldset 요소는 form 요소와 관련된

데이터를 하나로 묶는 역할을 합니다.

 

legend 요소는 fieldset 요소 안에서만 

사용할 수 있으며, fieldset 요소의 

제목을 나타냅니다.

<form action="https://koras02.tistory.com">
    <fieldset>
        <legend>입력 양식</legend>
          이름: <br>
        <input type="text" name="username"> <br>
          이메일: <br>
        <input type="text" name="email"> <br>
        <input type="submit" value="전송">
    </fieldset>
</form>

---

HTML5에서 추가된 input 요소

• datalist 요소
• keygen 요소
• output 요소

---

참고 자료

코딩교육 티씨피스쿨

GitHub - Koras02/html-study: html 블로그 작성용 - study1