[HTML 태그] 폼 요소
2022. 12. 9. 15:47
사용자로부터 데이터를 받아야 하는 경우 사용되는 요소들을 폼 요소라고 한다.
폼 요소의 종류에 대해 알아보고 적절한 형식으로 데이터를 입력받는 방식에 대해 알아본다.
목차
1. 'text' 타입
3. 'radio' 타입
5. 'file' 타입
6. 'submit', 'reset', 'image', 'button' 타입
7. <select>
8. <textarea>
9. <button>
10. <label>
12. <form>
'text' 타입
주로 아이디, 이름, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<h1>From 관련 요소</h1>
아이디 : <input type="text">
</body>
</html>
'text' 타입에는 placeholder 속성이 있다.
placeholder 속성은 사용자가 입력하기 전 미리 화면에 노출하는 값으로, 입력하는 값의 양식을 표시할 수도 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<h1>Form 관련 요소</h1>
아이디 : <input type="text" placeholder="아이디를 입력하세요.">
</body>
</html>
'password' 타입
암호와 같이 공개할 수 없는 내용을 입력할 때 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<h1>Form 관련 요소</h1>
아이디 : <input type="text" placeholder="아이디를 입력하세요.">
<br>
패스워드 : <input type="password">
</body>
</html>
'radio' 타입
라디오 버튼을 만들 때 사용한다.
라디오 버튼은 중복 선택이 불가능한 버튼이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<h1>Form 관련 요소</h1>
아이디 : <input type="text" placeholder="아이디를 입력하세요.">
<br>
패스워드 : <input type="password">
<br>
<input type="radio">
</body>
</html>
단순하게 라디오 버튼을 추가한 브라우저 화면 모습이다.
중복 선택이 불가능한 성별을 라디오 버튼으로 구현해본다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<h1>Form 관련 요소</h1>
아이디 : <input type="text" placeholder="아이디를 입력하세요.">
<br>
패스워드 : <input type="password">
<br>
성별 : 남자 <input type="radio"> 여자 <input type="radio">
</body>
</html>
그런데 라디오 버튼을 체크해보면 둘 다 체크가 가능한 것을 알 수 있다.
브라우저 입장에서 이 라디오 버튼 두 개가 같은 그룹인지 아닌지를 알 수 없어서 일어나는 일이다.
name 속성을 통해 라디오 버튼을 그룹화할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<h1>Form 관련 요소</h1>
아이디 : <input type="text" placeholder="아이디를 입력하세요.">
<br>
패스워드 : <input type="password">
<br>
성별 : 남자 <input type="radio" name="sex"> 여자 <input type="radio" name="sex">
</body>
</html>name으로 그룹화하면 동시에 두 개 체크가 불가능해지는 것을 확인할 수 있다.
또, 라디오 버튼과 후에 소개할 체크박스 버튼에는 checked라는 속성이 있는데
이 속성은 사용자가 체크하기 전에 미리 체크되어 있게 하는 속성이다.
따로 속성값이 없는데, 이 속성이 없으면 체크가 안되게끔 있으면 되게끔하는 불린 속성에 해당하기 때문이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<h1>Form 관련 요소</h1>
아이디 : <input type="text" placeholder="아이디를 입력하세요.">
<br>
패스워드 : <input type="password">
<br>
성별 : 남자 <input type="radio" name="sex" checked> 여자 <input type="radio" name="sex">
</body>
</html>코드를 저장하고 브라우저로 html파일을 확인하면 남자 버튼이 체크되어 있는 것을 확인할 수 있다.
'checkbox' 타입
체크박스를 만들 때 사용한다.
체크박스는 라디오 버튼과 다르게 중복 체크가 가능하다.
거의 대부분 radio 타입과 같게 사용할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<h1>Form 관련 요소</h1>
아이디 : <input type="text" placeholder="아이디를 입력하세요.">
<br>
패스워드 : <input type="password">
<br>
성별 : 남자 <input type="radio" name="sex" checked> 여자 <input type="radio" name="sex">
<br>
취미 : 영화감상 <input type="checkbox" name="hobby" checked> 음악감상 <input type="checkbox" name="hobby"> 독서 <input type="checkbox" name="hobby">
</body>
</html>
'file' 타입
파일을 서버에 올릴 때 사용한다.
브라우저에 따라 표현되는 형태는 조금씩 다르지만 동작은 모두 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<h1>Form 관련 요소</h1>
아이디 : <input type="text" placeholder="아이디를 입력하세요.">
<br>
패스워드 : <input type="password">
<br>
성별 : 남자 <input type="radio" name="sex" checked> 여자 <input type="radio" name="sex">
<br>
취미 : 영화감상 <input type="checkbox"name="hobby" checked> 음악감상 <input type="checkbox" name="hobby"> 독서 <input type="checkbox" name="hobby">
<br>
프로필 사진 업로드 : <input type="file">
</body>
</html>
'submit', 'reset', 'image', 'button' 타입
submit, reset, image, button 타입은 모두 클릭할 수 있는 버튼을 만든다.
submit은 form의 값을 전송하는 버튼,
reset은 form의 값을 초기화하는 버튼,
image는 이미지를 삽입할 수 있는 버튼(submit과 동작은 동일),
button은 아무 기능이 없는 버튼을 만든다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<h1>Form 관련 요소</h1>
아이디 : <input type="text" placeholder="아이디를 입력하세요.">
<br>
패스워드 : <input type="password">
<br>
성별 : 남자 <input type="radio" name="sex" checked> 여자 <input type="radio" name="sex">
<br>
취미 : 영화감상 <input type="checkbox"name="hobby" checked> 음악감상 <input type="checkbox" name="hobby"> 독서 <input type="checkbox" name="hobby">
<br>
프로필 사진 업로드 : <input type="file">
<br>
<input type="submit">
<br>
<input type="reset">
<br>
<input type="button">
<br>
<input type="image">
</body>
</html>
submit과 image 타입의 버튼의 동작을 확인하기 위해 코드를 추가한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<form action="/test.html">
<h1>Form 관련 요소</h1>
아이디 : <input type="text" placeholder="아이디를 입력하세요.">
<br>
패스워드 : <input type="password">
<br>
성별 : 남자 <input type="radio" name="sex" checked> 여자 <input type="radio" name="sex">
<br>
취미 : 영화감상 <input type="checkbox"name="hobby" checked> 음악감상 <input type="checkbox" name="hobby"> 독서 <input type="checkbox" name="hobby">
<br>
프로필 사진 업로드 : <input type="file">
<br>
<input type="submit">
<br>
<input type="reset">
<br>
<input type="button">
<br>
<input type="image">
</form>
</body>
</html><form> 태그는 아래에서 따로 설명하도록 한다.
이 상태에서 브라우저에 아이디와 패스워드를 입력하고 제출 버튼을 클릭해보자.
지금은 test.html 파일이 없어서 이런 화면이 나오게 된다.
실제로는 form에서 입력한 값들이 test.html에 전송되게 된다.
이번에는 reset 타입의 버튼의 동작을 살펴본다.
아이디와 패스워드를 입력하고
초기화 버튼을 클릭해보자.
입력한 값들이 모두 초기화된 것을 확인할 수 있다.
button 타입의 버튼은 아무런 기능이 없다.
대신 사용자가 기능을 커스텀해서 사용할 수 있다.
submit, reset, button 타입의 버튼들은 모두 value속성을 통해 버튼 이름을 지정할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<form action="/test.html">
<h1>Form 관련 요소</h1>
아이디 : <input type="text" placeholder="아이디를 입력하세요.">
<br>
패스워드 : <input type="password">
<br>
성별 : 남자 <input type="radio" name="sex" checked> 여자 <input type="radio" name="sex">
<br>
취미 : 영화감상 <input type="checkbox"name="hobby" checked> 음악감상 <input type="checkbox" name="hobby"> 독서 <input type="checkbox" name="hobby">
<br>
프로필 사진 업로드 : <input type="file">
<br>
<input type="submit" value="전송">
<br>
<input type="reset" value="취소">
<br>
<input type="button" value="동작">
<br>
<input type="image">
</form>
</body>
</html>
image 타입의 버튼은 <image> 태그와 동일하게 이미지의 위치 src 속성과 이미지의 대체 이름 alt 속성이 필수적으로 포함되어야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<form action="/test.html">
<h1>Form 관련 요소</h1>
아이디 : <input type="text" placeholder="아이디를 입력하세요.">
<br>
패스워드 : <input type="password">
<br>
성별 : 남자 <input type="radio" name="sex" checked> 여자 <input type="radio" name="sex">
<br>
취미 : 영화감상 <input type="checkbox"name="hobby" checked> 음악감상 <input type="checkbox" name="hobby"> 독서 <input type="checkbox" name="hobby">
<br>
프로필 사진 업로드 : <input type="file">
<br>
<input type="submit" value="전송">
<br>
<input type="reset" value="초기화">
<br>
<input type="button" value="동작">
<br>
<input type="image" src="https://w.namu.la/s/3ef06a2a02c548b3911a8b2b19d224a768276c6818f43c4c65fefe53f58545a989cf9a37ac7a9963dad6c16c08e83d62465d53d91a50b17139c74254dbdae77ca46ef1b129481843a8af34e902f305bf39a4bdfb57ff7b2477d4c4feb5e3aded" alt="페페와인" width="50px" height="50px">
</form>
</body>
</html>
페페 와인 이미지를 클릭하면
submit 타입의 버튼과 동일한 동작을 하는 것을 확인할 수 있다.
<select>
<select> 태그는 선택 목록 상자 또는 콤보 박스라고 한다.
몇 개의 선택지를 리스트 형태로 노출하고 그중 하나를 선택할 수 있게 하는 태그이다.
<select> 태그 내부의 <option> 태그로 각 항목을 나타낸다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<form action="/test.html">
<h1>Form 관련 요소</h1>
아이디 : <input type="text" placeholder="아이디를 입력하세요.">
<br>
패스워드 : <input type="password">
<br>
성별 : 남자 <input type="radio" name="sex" checked> 여자 <input type="radio" name="sex">
<br>
취미 : 영화감상 <input type="checkbox"name="hobby" checked> 음악감상 <input type="checkbox" name="hobby"> 독서 <input type="checkbox" name="hobby">
<br>
프로필 사진 업로드 : <input type="file">
<br>
사는 지역 : <select>
<option>서울</option>
<option>경기</option>
<option>부산</option>
<option>제주</option>
</select>
<br>
<input type="submit" value="전송">
<br>
<input type="reset" value="취소">
<br>
<input type="button" value="동작">
<br>
<input type="image" src="https://w.namu.la/s/3ef06a2a02c548b3911a8b2b19d224a768276c6818f43c4c65fefe53f58545a989cf9a37ac7a9963dad6c16c08e83d62465d53d91a50b17139c74254dbdae77ca46ef1b129481843a8af34e902f305bf39a4bdfb57ff7b2477d4c4feb5e3aded" alt="페페와인" width="50px" height="50px">
</form>
</body>
</html>
아래 화살표 모양을 클릭하면
리스트 형태로 지역이 노출되는 것을 확인할 수 있다.
<option> 태그는 radio 버튼과 checkbox 버튼처럼 기본적으로 선택되어 있는 항목을 지정해줄 수 있는데,
selected 속성을 사용하면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<form action="/test.html">
<h1>Form 관련 요소</h1>
아이디 : <input type="text" placeholder="아이디를 입력하세요.">
<br>
패스워드 : <input type="password">
<br>
성별 : 남자 <input type="radio" name="sex" checked> 여자 <input type="radio" name="sex">
<br>
취미 : 영화감상 <input type="checkbox"name="hobby" checked> 음악감상 <input type="checkbox" name="hobby"> 독서 <input type="checkbox" name="hobby">
<br>
프로필 사진 업로드 : <input type="file">
<br>
사는 지역 : <select>
<option>서울</option>
<option>경기</option>
<option selected>부산</option>
<option>제주</option>
</select>
<br>
<input type="submit" value="전송">
<br>
<input type="reset" value="취소">
<br>
<input type="button" value="동작">
<br>
<input type="image" src="https://w.namu.la/s/3ef06a2a02c548b3911a8b2b19d224a768276c6818f43c4c65fefe53f58545a989cf9a37ac7a9963dad6c16c08e83d62465d53d91a50b17139c74254dbdae77ca46ef1b129481843a8af34e902f305bf39a4bdfb57ff7b2477d4c4feb5e3aded" alt="페페와인" width="50px" height="50px">
</form>
</body>
</html>
브라우저를 켜서 확인해보면 따로 클릭하지 않아도 부산 항목이 선택되어 있는 것을 확인할 수 있다.
<textarea>
여러 줄의 텍스트를 입력할 때 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<form action="/test.html">
<h1>Form 관련 요소</h1>
아이디 : <input type="text" placeholder="아이디를 입력하세요.">
<br>
패스워드 : <input type="password">
<br>
성별 : 남자 <input type="radio" name="sex" checked> 여자 <input type="radio" name="sex">
<br>
취미 : 영화감상 <input type="checkbox"name="hobby" checked> 음악감상 <input type="checkbox" name="hobby"> 독서 <input type="checkbox" name="hobby">
<br>
프로필 사진 업로드 : <input type="file">
<br>
사는 지역 : <select>
<option>서울</option>
<option>경기</option>
<option selected>부산</option>
<option>제주</option>
</select>
<br>
자기소개 : <textarea></textarea>
<br>
<input type="submit" value="전송">
<br>
<input type="reset" value="취소">
<br>
<input type="button" value="동작">
<br>
<input type="image" src="https://w.namu.la/s/3ef06a2a02c548b3911a8b2b19d224a768276c6818f43c4c65fefe53f58545a989cf9a37ac7a9963dad6c16c08e83d62465d53d91a50b17139c74254dbdae77ca46ef1b129481843a8af34e902f305bf39a4bdfb57ff7b2477d4c4feb5e3aded" alt="페페와인" width="50px" height="50px">
</form>
</body>
</html>
<textarea> 태그는 cols, rows 속성을 사용하여 텍스트 상자의 크기를 조정할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<form action="/test.html">
<h1>Form 관련 요소</h1>
아이디 : <input type="text" placeholder="아이디를 입력하세요.">
<br>
패스워드 : <input type="password">
<br>
성별 : 남자 <input type="radio" name="sex" checked> 여자 <input type="radio" name="sex">
<br>
취미 : 영화감상 <input type="checkbox"name="hobby" checked> 음악감상 <input type="checkbox" name="hobby"> 독서 <input type="checkbox" name="hobby">
<br>
프로필 사진 업로드 : <input type="file">
<br>
사는 지역 : <select>
<option>서울</option>
<option>경기</option>
<option selected>부산</option>
<option>제주</option>
</select>
<br>
자기소개 : <textarea cols="30" rows="5"></textarea>
<br>
<input type="submit" value="전송">
<br>
<input type="reset" value="취소">
<br>
<input type="button" value="동작">
<br>
<input type="image" src="https://w.namu.la/s/3ef06a2a02c548b3911a8b2b19d224a768276c6818f43c4c65fefe53f58545a989cf9a37ac7a9963dad6c16c08e83d62465d53d91a50b17139c74254dbdae77ca46ef1b129481843a8af34e902f305bf39a4bdfb57ff7b2477d4c4feb5e3aded" alt="페페와인" width="50px" height="50px">
</form>
</body>
</html>
여기서 cols 속성은 영어를 기준으로 하기 때문에 한글을 기준으로는 길이가 조금 다를 수 있다.
placeholder 속성도 사용할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<form action="/test.html">
<h1>Form 관련 요소</h1>
아이디 : <input type="text" placeholder="아이디를 입력하세요.">
<br>
패스워드 : <input type="password">
<br>
성별 : 남자 <input type="radio" name="sex" checked> 여자 <input type="radio" name="sex">
<br>
취미 : 영화감상 <input type="checkbox"name="hobby" checked> 음악감상 <input type="checkbox" name="hobby"> 독서 <input type="checkbox" name="hobby">
<br>
프로필 사진 업로드 : <input type="file">
<br>
사는 지역 : <select>
<option>서울</option>
<option>경기</option>
<option selected>부산</option>
<option>제주</option>
</select>
<br>
자기소개 : <textarea cols="30" rows="5" placeholder="자기소개는 짧게 해주세요."></textarea>
<br>
<input type="submit" value="전송">
<br>
<input type="reset" value="취소">
<br>
<input type="button" value="동작">
<br>
<input type="image" src="https://w.namu.la/s/3ef06a2a02c548b3911a8b2b19d224a768276c6818f43c4c65fefe53f58545a989cf9a37ac7a9963dad6c16c08e83d62465d53d91a50b17139c74254dbdae77ca46ef1b129481843a8af34e902f305bf39a4bdfb57ff7b2477d4c4feb5e3aded" alt="페페와인" width="50px" height="50px">
</form>
</body>
</html>
<button>
버튼을 만들 때 사용하며 submit, reset, button 3가지의 타입이 있다.
input 타입의 submit, reset, button과 모두 같은 기능을 가진다.
대신 빈 태그인 input 태그와 달리 닫는 태그가 존재하여 내용을 직접 입력할 수 있고, 스타일을 자유롭게 적용할 수 있는 장점이 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<form action="/test.html">
<h1>Form 관련 요소</h1>
아이디 : <input type="text" placeholder="아이디를 입력하세요.">
<br>
패스워드 : <input type="password">
<br>
성별 : 남자 <input type="radio" name="sex" checked> 여자 <input type="radio" name="sex">
<br>
취미 : 영화감상 <input type="checkbox"name="hobby" checked> 음악감상 <input type="checkbox" name="hobby"> 독서 <input type="checkbox" name="hobby">
<br>
프로필 사진 업로드 : <input type="file">
<br>
사는 지역 : <select>
<option>서울</option>
<option>경기</option>
<option selected>부산</option>
<option>제주</option>
</select>
<br>
자기소개 : <textarea cols="30" rows="5" placeholder="자기소개는 짧게 해주세요."></textarea>
<br>
<button type="submit">전송</button>
<br>
<button type="reset">취소</button>
<br>
<input type="submit" value="전송">
<br>
<input type="reset" value="취소">
<br>
<input type="button" value="동작">
<br>
<input type="image" src="https://w.namu.la/s/3ef06a2a02c548b3911a8b2b19d224a768276c6818f43c4c65fefe53f58545a989cf9a37ac7a9963dad6c16c08e83d62465d53d91a50b17139c74254dbdae77ca46ef1b129481843a8af34e902f305bf39a4bdfb57ff7b2477d4c4feb5e3aded" alt="페페와인" width="50px" height="50px">
</form>
</body>
</html>
input 타입의 버튼들과 모양도 똑같고 동작도 똑같은 것을 브라우저에서 확인할 수 있다.
<label>
<label> 태그는 폼 요소의 이름과 폼 요소를 명시적으로 연결시켜주기 위해 사용한다.
모든 폼 요소에서 사용할 수 있다.
<label> 태그는 사용성, 웹접근성 측면에서 중요한 역할을 하기 때문에 필수적으로 사용해야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<form action="/test.html">
<h1>Form 관련 요소</h1>
<label for="userid">아이디 : </label><input type="text" id="userid" placeholder="아이디를 입력하세요.">
<br>
<label for="userpw">패스워드 : </label><input type="password" id="userpw">
<br>
성별 : <label for="male">남자 </label><input type="radio" id="male" name="sex" checked> <label for="female">여자 </label><input type="radio" id="female" name="sex">
<br>
취미 : <label for="movie">영화감상 <input type="checkbox" id="movie" name="hobby" checked> <label for="music">음악감상 <input type="checkbox" id="music" name="hobby"> <label for="book">독서 <input type="checkbox" id="book" name="hobby">
<br>
<label for="fileupload">프로필 사진 업로드 : </label><input type="file" id="fileupload">
<br>
<label for="live">사는 지역 : </label><select id="live">
<option>서울</option>
<option>경기</option>
<option selected>부산</option>
<option>제주</option>
</select>
<br>
<label for="textarea">자기소개 : </label><textarea id="textarea" cols="30" rows="5" placeholder="자기소개는 짧게 해주세요."></textarea>
<br>
<button type="submit">전송</button>
<br>
<button type="reset">취소</button>
<br>
<input type="submit" value="전송">
<br>
<input type="reset" value="취소">
<br>
<input type="button" value="동작">
<br>
<input type="image" src="https://w.namu.la/s/3ef06a2a02c548b3911a8b2b19d224a768276c6818f43c4c65fefe53f58545a989cf9a37ac7a9963dad6c16c08e83d62465d53d91a50b17139c74254dbdae77ca46ef1b129481843a8af34e902f305bf39a4bdfb57ff7b2477d4c4feb5e3aded" alt="페페와인" width="50px" height="50px">
</form>
</body>
</html>
브라우저에서는 변화가 없다.
대신 폼 요소의 이름을 클릭하면 폼 요소를 클릭한 것 처럼 동작하게 된다.
<fieldset>, <legend>
<fieldset>, <legend>는 폼 요소를 그룹화하기 위해 사용하는 태그이다.
<fieldset> 태그는 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용한다.
<legend> 태그는 폼 요소의 제목으로 <fieldset> 태그 내에서 가장 먼저 등장해야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Form 관련 요소</title>
</head>
<body>
<form action="/test.html">
<h1>Form 관련 요소</h1>
<fieldset>
<legend>기본 정보</legend>
<label for="userid">아이디 : </label><input type="text" id="userid" placeholder="아이디를 입력하세요.">
<br>
<label for="userpw">패스워드 : </label><input type="password" id="userpw">
<br>
성별 : <label for="male">남자 </label><input type="radio" id="male" name="sex" checked> <label for="female">여자 </label><input type="radio" id="female" name="sex">
<br>
</fieldset>
<fieldset>
<legend>부가 정보</legend>
취미 : <label for="movie">영화감상 <input type="checkbox" id="movie" name="hobby" checked> <label for="music">음악감상 <input type="checkbox" id="music" name="hobby"> <label for="book">독서 <input type="checkbox" id="book" name="hobby">
<br>
<label for="fileupload">프로필 사진 업로드 : </label><input type="file" id="fileupload">
<br>
<label for="live">사는 지역 : </label><select id="live">
<option>서울</option>
<option>경기</option>
<option selected>부산</option>
<option>제주</option>
</select>
<br>
<label for="textarea">자기소개 : </label><textarea id="textarea" cols="30" rows="5" placeholder="자기소개는 짧게 해주세요."></textarea>
<br>
<button type="submit">전송</button>
<br>
<button type="reset">취소</button>
<br>
<input type="submit" value="전송">
<br>
<input type="reset" value="취소">
<br>
<input type="button" value="동작">
<br>
<input type="image" src="https://w.namu.la/s/3ef06a2a02c548b3911a8b2b19d224a768276c6818f43c4c65fefe53f58545a989cf9a37ac7a9963dad6c16c08e83d62465d53d91a50b17139c74254dbdae77ca46ef1b129481843a8af34e902f305bf39a4bdfb57ff7b2477d4c4feb5e3aded" alt="페페와인" width="50px" height="50px">
</fieldset>
</form>
</body>
</html>
<form>
<form> 태그는 폼 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해주는 역할을 한다.
만약 fieldset으로 구조화되어있다면 <fieldset>도 함께 감싸는 역할을 한다.
<form>에는 대표적인 두개의 속성이 있다.
action 속성은 데이터를 처리하기 위한 서버의 주소를 지정하는 속성,
method 속성은 데이터를 전송하는 방식을 지정하는 속성이다.
method 속성값은 get/post 2가지 방식이 존재한다.
우선 get일 때의 동작을 살펴보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form2</title>
</head>
<body>
<form action="/result.html" method="get">
아이디 : <input type="text" name="id">
<br>
패스워드 : <input type="password" name="pw">
<br>
<input type="submit">
</form>
</body>
</html>
아이디와 패스워드를 브라우저에 입력하고 제출 버튼을 클릭한다.
result.html 파일이 존재하지 않아서 이런 화면이 나오게 된다.
자세히 볼 것은 링크에 아이디와 패스워드가 표시된다는 점이다.
이번에는 post일 때의 동작을 확인해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form2</title>
</head>
<body>
<form action="/result.html" method="post">
아이디 : <input type="text" name="id">
<br>
패스워드 : <input type="password" name="pw">
<br>
<input type="submit">
</form>
</body>
</html>
마찬가지로 브라우저에서 아이디와 패스워드를 입력하고 제출 버튼을 클릭한다.
브라우저 화면은 get일 때와 동일하지만
링크를 보면 이번에는 아이디와 패스워드가 표시되지 않은 것을 볼 수 있다.
이렇듯 민감한 정보를 서버에 넘겨주어야 할 때는 post를
그렇지 않을 경우에는 get을 쓰는 것이 좋다.
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/cs120
비전공자를 위한 HTML/CSS
부스트코스 무료 강의
www.boostcourse.org
'공부 > HTML과 CSS' 카테고리의 다른 글
| [콘텐츠 모델/시멘틱 마크업/블록&인라인] 시멘틱 마크업 (0) | 2022.12.12 |
|---|---|
| [콘텐츠 모델/시멘틱 마크업/블록&인라인] 콘텐츠 모델 (0) | 2022.12.12 |
| [HTML 태그] 테이블 요소 (0) | 2022.12.08 |
| [HTML 태그] 이미지 요소 (0) | 2022.12.07 |
| [HTML 태그] 리스트 요소 (0) | 2022.12.07 |
