[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 요소
참고 자료
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
GitHub - Koras02/html-study: html 블로그 작성용 - study1
html 블로그 작성용 - study1. Contribute to Koras02/html-study development by creating an account on GitHub.
github.com