FORM 요소
폼 관련 요소: 사용자로부터 데이터를 받아야 하는 경우 사용되는 요소
FORM요소
폼 데이터를 그룹화하여 서버에 전송한다
(ex. 예를 들어 한 창안에 게시글을 작성하는 공간과 이벤트에 관한 공간이 있는 경우 게시내용 작성후 완료를 눌렀을때 이벤트에 관한 정보를 전송한다거나 이벤트에 관한 내용을 전달받는 서버로 보내면 안된다.)
<form action="..." method="...">
...
</form>- action: 폼 데이터를 처리하기 위한 서버의 주소
- method:데이터를 전송하는 방식을 지정(get, post)
<예제>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>form</title>
</head>
<body>
<form action="/result.html" method="get">
아이디: <input type="text" name="id"><br>
비번: <input type="password" name="pw">
<input type="submit">
</form>
</body>
</html>get은 민감한 정보를 담을땐 사용하면 안됨(URL에 작성한 내용이 다 보이게된다)
회원가입 로그인은 post로 사용을 해야한다.
(<label>은 사용성, 접근성적인 측면으로 중요한 역할을 하므로 반드시 써주는 것이 좋습니다.)
(반면, post 방식은 데이터가 전송될 때 데이터가 노출되지 않습니다.)
https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms
INPUT 요소 (inline 요소)
대표적인 폼 요소로, 다양한 type속성으로 여러 종류의 입력 양식으로 나타난다.
<input type="...">text, passward, radio, checkbox, file, image, submit, reset, button...
input type="text"
<body>
<h1>Form 관련 요소</h1>
아이디: <input type="text" placeholder="영문으로만 써주세요"><br>
</body><input type="text">는 단순한 텍스트를 입력할때 사용한다. 긴 네모칸이 생김
여기에는 placeholder라는 속성이 있는데 사용자가 입력하기 전에 화면에 노출하는 값으로, 값의 양식을 표현할 수 있음.
속성
- required: 반드시 작성하게 함
- maxlength: 최대 길이
- minlength: 최소 길이
<input required type="text" maxlength="10" placeholder="What is your name?">
type="password"
비밀번호: <input type="password"><br>화면에 공개할 수 없는 내용
실제 입력할때 값을 노출하지 않음
type="radio"
<intput type="radio" name="gender" checked>여자
<intput type="radio" name="gender">남자<br>라디오 버튼이라는 선택버튼을 만들때 사용
라디오 버튼은 중복 선택이 불가능하며 하나의 항목만을 선택해야 함 (동그란 버튼)
위와 같이 name으로 그룹화 해주지 않으면 개별그룹으로 인식하여 중복 선택이 가능한 것처럼 보인다
type="checkbox"
등산 <input type="checkbox" name="hobby" checked>
독서 <input type="checkbox" name="hobby">
운동 <input type="checkbox" name="hobby"><br>radio와 다르게 항목 중복 선택이 가능(네모난 버튼)
radio와 checkbox에는 checked, name속성이 존재
checked : boolean 속성 미리 체크를 디폴트 값으로 해놓음
name : 라디오 버튼과 체크박스를 그룹화해주는 속성
type="file"
프로필 파일 사진 업로드: <input type="file"><br>파일을 서버에 올릴때 사용
파일선택이라는 버튼이 생김
type="submit|reset|image|button"
<form action="./test.html">
<input type="submit" value="전송"><br>
<input type="reset" value="취소"><br>
<input type="button" value="등록"><br>
<input type="image" src="./img.jpg" alt="버튼" width="100" height="100">
</form>submit, reset, image, button 모두 클릭 가능한 버튼
- submit : form의 값을 전송하는 버튼
- reset : form의 값을 초기화하는 버튼
- image : 이미지를 삽입할 수 있는 버튼 (submit과 동작이 동일함)
- button : 아무 기능이 없는 버튼
value 속성으로 버튼의 내용을 바꿀 수 있다.
type="image"는 이미지 관련 속성인 src, alt 속성이 반드시 필요하며 width/height 속성을 적용할 수도 있습니다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms
SELECT 요소
선택 목록상자(콤보박스)
<select>
<option>서울</option>
<option>경기</option>
<option>강원</option>
<option selected>제주</option>
</select><br>- <option> : 항목
속성
selected: <input>의 checked와 비슷한 기능 해당 옵션을 디폴트 값으로 설정
multiple: 다중 선택 가능하게 함
TEXTAREA
여러 줄 텍스트 입력 상자
자기소개: <textarea cols="30" rows="5" placeholder="자기 소개는 짧게 해주세요">
</textarea><br>cols, rows 속성
- cols : 가로 크기를 조절하는 속성(한 줄에 들어가는 글자의 수, 수치의 의미는 평균적인 글자의 너비로 정확히 글자 수를 나타내지는 않습니다.)
- rows : 세로 크기를 조절하는 속성(화면에 보여지는 줄 수)
placeholder 설정 가능
<input type="text">와 다른 점
-여러줄입력이 가능하다(박스크기 조정 가능)
-닫는 태그가 있다.
BUTTON요소
사용자가 클릭 가능한 버튼
<button type="...">...</button>submit, reset, button
VS<input type="submit|reset|button">
<button type="submit">전송</button><br>
<button type="reset">취소</button><br>
<!--위아래같음-->
<input type="submit" value="전송"><br>
<input type="reset" value="취소"><br>input과 다른 점 빈 태그가 아니며 내용을 안에 직접 넣을 수 있으므로 좀 더 자유로운 스타일 표현이 가능
https://developer.mozilla.org/en-US/docs/Web/HTML/Element#forms
LABEL(레이블)요소
폼 컨트롤과 연결 시켜주기 위함으로 웹 접근성 향상에 도움이 된다.(필수적)
<label for="userid">아이디 :</label>
<input type="text" placeholder="영문으로만 써주세요" id="userid"><br>
<label for="userpw">비밀번호 :</label>
<input type="password" id="userpw"><br>
성별 : <label for="male">남자</label>
<input type="radio" name="gender" id="male" checked>,
<label for="female">여자</label>
<input type="radio" name="gender" id="female"><br>
<label for="username">사는 곳</label>
<select id="username">
<option>서울</option>
...
</select>
<label for="usercomment">하고 싶은 말</label>
<textarea id="username">
</textarea>label에 for 속성을 넣어준다음,
이어주고자하는 태그(서버에 보내고 싶은 정보)에 같은 값으로 id를 넣어준다.
(form 요소의 id 속성값과 <label>의 for 속성값을 같게 적어주어야 합니다.)
<label>은 사용성, 접근성적인 측면으로 중요한 역할을 하므로 반드시 써주는 것이 좋음
실습결과
아이디를 클릭을 했는데 마치 아이디 입력칸을 클릭한 것처럼 박스안에 커서가 깜빡임
남자나 여자라는 글자를 클릭해도 움직임
FIELDSET, LEGEND 요소
<fieldset>
<legend>기본정보</legend>
...
</fieldset>
<fieldset>
<legend>부가 정보</legend>
...
</fieldset>- <fieldset>: 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용
- <legend>: 폼 요소의 제목으로 <fieldset>요소 내부에 작성
⚠️: legend 태그를 쓸때는 fieldset 가장먼저 자식태그로 사용되어야한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>form</title>
</head>
<body>
<form action="">
<h1>Form 관련 요소</h1>
<fieldset>
<legend>기본 정보</legend>
<label for="userid">아이디 : </label> <input type="text" placeholder="영문으로만 써주세요" id="userid"><br>
<label for="userpw">비밀번호 : </label> <input type="password" id="userpw"><br>
성별 : <label for="male">남자</label> <input type="radio" name="gender" id="male" checked>, <label for="female">여자</label> <input type="radio" name="gender" id="female"><br>
</fieldset>
<fieldset>
<legend>부가 정보</legend>
취미 : 영화 감상 <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 selected>제주</option>
</select><br>
자기소개 : <textarea cols="30" rows="5" placeholder="자기소개는 짧게 해주세요."></textarea><br>
<button type="submit">전송</button>
<button type="reset">취소</button>
</fieldset>
</form>
</body>
</html>fieldset으로 묶고 legend로 설명
.
.
결과
이렇게 묶인다.
Reference
본 게시물은 부스트코스 비전공자를 위한 HTML/CSS 강의 수강후 작성되었음.
https://www.boostcourse.org/cs120/lecture/92868?isDesc=false
비전공자를 위한 HTML/CSS
부스트코스 무료 강의
www.boostcourse.org
'HTML' 카테고리의 다른 글
| HTML: 5 테이블 요소 (0) | 2022.03.22 |
|---|---|
| HTML: 2. HTML 태그들 (0) | 2022.03.21 |
| HTML: 1 HTML이란? (0) | 2022.03.21 |
