[Front-End] HTML 입력 양식

이번 포스팅에서는 HTML의 입력 양식에 대하여 공부를 해보고자 한다.

 

---

Form 요소

웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있다.

사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용한다.

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

 

action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시한다.

전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다.

 

method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시한다.

사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달된다.

method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET 방식과 POST 방식으로 나누어진다.

 

---

GET 방식

주소에 데이터(data)를 추가하여 전달하는 방식을 말한다. (URL의 뒤에 이어 붙는다.)

데이터가 주소 입력창에 그대로 나타나며, 전송할 수 있는 데이터의 크기 또한 제한적이다.

한글이나 특수문자를 전송할 경우 URL 형식에 맞지 않는 데이터는 인코딩(Encoding)이 반드시 필요하다.

검색 엔진의 쿼리(query)와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 주로 사용한다.

 

---

POST 방식

데이터(data)를 별도로 첨부하여 전달하는 방식을 말한다. (HTTP body에 넣어 전달한다.)

데이터가 외부에 드러나지 않으며, 전송할 수 있는 데이터의 크기 또한 제한이 없다. (암호화가 되지는 않는다.)

보안성 및 활용성이 GET 방식보다 좋다.

 

---

GET 방식과 POST 방식의 차이점

POST 방식은 GET 방식과 달리, 브라우저에서 캐싱(Caching)이 불가능하다.

즉, GET 방식으로 구현할 경우 웹 크롤러(Web Crawler)가 그것에 접근하여 마음대로 실행할 가능성이 있다.

 

만약에 웹 페이지에 게시판의 수정, 삭제 기능을 GET으로 구현했다면 의도치 않게 글이 수정 혹은 삭제될 수 있다.

그러므로 서버의 값이나 상태를 변경하는 경우에는 POST로 구현하는 것이 적절하다.

GET은 SQL 쿼리의 SELECT와 같은 단순 조회에만 이용하는 것이 좋다.

 

 

---

다양한 타입의 input 요소

HTML에서는 다양한 타입의 input 요소를 사용하여 사용자로부터 입력을 받을 수 있다.

form 요소 그 자체는 웹 페이지에 나타나지 않지만 form 요소에 포함된 다양한 input 요소를 통해 사용자의 입력을 받을 수 있다.

 

텍스트 입력(text)

<input> 태그의 type 속성 값을 "text"로 설정하면, 사용자로부터 한 줄의 텍스트를 입력받을 수 있다.

예제

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

 

---

비밀번호 입력(password)

<input> 태그의 type 속성 값을 "password"로 설정하면, 사용자로부터 비밀번호를 입력받을 수 있다.

비밀번호를 입력받기 때문에 화면에는 입력받은 문자나 숫자 대신 별표나 작은 원 모양이 표시된다.

예제

<form>
    ID: <input type="text" name="id"><br>
    비밀번호: <input type="password" name="pw">
</form>

 

---

라디오 버튼(radio)

<input> 태그의 type 속성 값을 "radio"로 설정하면, 사용자로부터 여러 개의 옵션(option) 중에서 단 하나의 옵션만을 입력받을 수 있다.

서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 한다.

checked 속성을 이용하여 여러 개의 옵션 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.

예제

<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="python"> Python
</form>

 

---

체크박스(checkbox)

<input> 태그의 type 속성 값을 "checkbox"로 설정하면, 사용자로부터 여러 개의 옵션 중에서 다수의 옵션을 입력받을 수 있다.

체크박스는 라디오 버튼과는 달리 여러 개의 옵션을 한 번에 입력받을 수 있다.

서버로 정확한 입력을 전송하기 위해서는 반드시 모든 input 요소의 name 속성이 같아야 한다.

checked 속성을 이용하여 여러 개의 옵션 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.

disabled 속성을 이용하여 해당 옵션을 선택할 수 없게 설정할 수도 있다.

예제

<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="python" disabled> Python
</form>

 

---

파일 선택(file)

<input> 태그의 type 속성 값을 "file"로 설정하면, 사용자로부터 파일을 전송받을 수 있다.

accept 속성을 이용하여 입력받을 수 있는 파일의 확장자 및 종류를 명시할 수 있다.

예제

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

 

---

선택 입력(select)

select 요소는 여러 개의 옵션이 드롭다운 리스트(drop-down list)로 되어 있으며, 그중에서 단 하나의 옵션만을 입력받을 수 있다.

option 요소는 드롭다운 리스트에서 선택할 수 있는 각각의 옵션을 명시한다.

selected 속성을 이용하여 드롭다운 리스트 중에서 처음에 미리 선택되는 옵션을 지정할 수 있다.

예제

<select name="animal">
    <option value="tiger"> 호랑이
    <option value="lion" selected> 사자
    <option value="dog"> 강아지
    <option value="cat"> 고양이
</select>

 

---

문장 입력(textarea)

textarea 요소는 사용자로부터 여러 줄의 텍스트를 입력받을 수 있다.

rows 속성과 cols 속성을 이용하여 textarea 요소의 크기를 자유롭게 지정할 수 있다.

예제

<textarea name="message" rows="7" cols="20">
    문장을 입력하세요.
</textarea>

 

---

버튼 입력(button)

button 요소는 사용자가 누를 수 있는 버튼을 나타낸다.

예제

<button type="button" onclick="alert('버튼을 클릭하셨습니다.')">
    버튼을 눌러주세요.
</button>

 

---

전송 버튼(submit)

<input> 태그의 type 속성 값을 "submit"으로 설정하면, 사용자로부터 입력받은 데이터(data)를 서버의 폼 핸들러로 제출하는 버튼을 만들 수 있다.

폼 핸들러(form-handler)란 입력받은 데이터를 처리하기 위한 서버 측의 웹 페이지를 의미한다.

폼 핸들러의 주소는 form 요소의 action 속성을 이용하여 명시할 수 있다.

예제

<form action="/examples/media/request.php">
    원하시는 색상을 입력해주세요. : <br>
    <input type="text" name="color" value="색상"><br><br>
    <input type="submit" value="전송">
</form>

 

---

필드셋(fieldset)

fieldset 요소는 form 요소와 관련된 데이터들을 하나로 묶어주는 역할을 한다.

legend 요소는 fieldset 요소 안에서만 사용할 수 있으며, fieldset 요소의 제목을 나타낸다.

예제

<form action="/examples/media/request.php">
    <fieldset>
        <legend>입력 양식</legend>
        이름 : <br>
        <input type="text" name="username"><br>
        이메일 : <br>
        <input type="text" name="email"><br><br>
        <input type="submit" value="전송">
    </fieldset>
</form>

 

---

Input 요소의 속성

input 요소의 여러 속성을 사용하면 사용자가 입력하는 방식을 더욱 다양하게 제어할 수 있다.

 

value 속성

value 속성은 input 요소의 입력 필드(input field)에 나타나는 초기값을 설정한다.

예제

<form>
	지역: <input type="text" name="local" value="서울">
</form>

 

---

readonly 속성

readonly 속성은 사용자가 입력 필드를 볼 수는 있으나, 수정할 수는 없도록 설정한다.

disabled 속성과 다른 점은 전송 버튼(submit)을 누르면 초깃값이 서버로 전송된다는 점이다.

예제

<form>
    지역: <input type="text" name="local" value="서울" readonly>
</form>

 

---

disabled 속성

disabled 속성은 사용자가 입력 필드를 아예 사용할 수 없도록 설정한다.

disabled 속성이 설정된 입력 필드는 사용할 수도 없고, 클릭할 수도 없다.

readonly 속성과는 달리 전송 버튼(submit)을 눌러도 초깃값이 서버로 전송되지 않는다.

예제

<form>
    지역: <input type="text" name="local" value="서울" disabled>
</form>

 

---

maxlength 속성

maxlength 속성은 입력 필드에 입력할 수 있는 문자의 최대 길이(length)를 설정한다.

예제

<form>
    이름: <input type="text" name="student_name" value="홍길동" maxlength="8">
</form>

 

---

size 속성

size 속성은 입력 필드에 보이는 input 요소의 크기(size)를 설정한다.

maxlength 속성과는 달리 입력 필드가 한 번에 보여줄 수 있는 문자의 최대 개수만을 의미한다.

입력될 수 있는 문자의 최대 길이는 maxlength 속성 값에 따라 달라지며, size 속성과는 전혀 무관하다.

예제

<form>
    이름: <input type="text" name="student_name" value="홍길동" size="15">
</form>

 

---