HTML: 3 폼요소

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

slow and steady

HTML: 3 폼요소

FORM 요소

FORM요소

INPUT 요소 (inline 요소)

SELECT 요소

TEXTAREA

BUTTON요소

LABEL(레이블)요소

FIELDSET, LEGEND 요소

Reference

'HTML' 카테고리의 다른 글

티스토리툴바

HTML: 3 폼요소

FORM 요소

FORM요소

INPUT 요소 (inline 요소)

SELECT 요소

TEXTAREA

BUTTON요소

LABEL(레이블)요소

FIELDSET, LEGEND 요소

Reference

'HTML' 카테고리의 다른 글

'HTML' Related Articles

티스토리툴바