본문 바로가기
HTML/HTML

HTML) form 관련 태그

by 박채니 2022. 5. 12.

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

form (사용자 입력 양식 태그)

- 서버로 사용자 입력 값을 전송

 

→ action : 폼을 제출할 서버 url

→ method : 전송방식 GET(기본값) / POST

* GET : 사용자 입력 값을 url에 직렬화하여 전송 (단순 조회 시 사용)

* POST : 사용자 입력 값을 http 메세지 body에 작성 (url에 노출되지 않음, 데이터 입력/수정/삭제 용도로 사용)

 

form 태그 하위에 name 속성이 있는 input 태그 값, select 태그 값, textarea 값 등을 제출

 

global 속성
id 페이지 내에 태그 식별자 (페이지 내에서 중복 허용 X)
폼 관련 속성
name 폼 전송 시 사용할 속성명
name 속성명이 없으면 전송 되지 않음

GET

 

[type:text]

placeholder - 입력 값이 없을 때 보여주는 안내

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>폼관련</title>
</head>
<body>
    <h2>폼관련</h2>
    <form action="" method="GET">
        <label for="username">이름 : </label>
        <input type="text" name="name" id="username" placeholder="이름을 입력하세요.">
        
	<br><br>
    <input type="submit" value="등록">
    </form>
</body>
</html>

이름을 입력하고 등록 버튼을 누르면 GET 방식이기 때문에 url에 직렬화되어 전송 된 것을 확인할 수 있습니다.

label의 for에 id값인 "username"을 입력해주어 input의 username을 가리킨다는 것을 의미(연결)합니다.

label 요소인 "이름 : "을 클릭하면 자동으로 input (네모박스)에 커서가 생깁니다. 

 

[type:email]

이메일 생성

 <h2>폼관련</h2>
    <form action="" method="GET">
        <label for="username">이름 : </label>
        <input type="text" name="name" id="username" placeholder="이름을 입력하세요.">

        <br>
        
        <label for="email">이메일 : </label>
        <input type="email" name="email" id="email" placeholder="이메일을 입력하세요">

    <br><br>
    <!-- input:submit-->
    <!-- input[submin]-->
    <input type="submit" value="등록">
    </form>

전송 url

이메일 속성을 이용하여 이메일 입력 칸을 생성 후 전송 하니 위처럼 전송 되는 것을 확인할 수 있습니다.

(%40은 '@'를 가리키는 걸 알 수 있음)

 

type을 email로 설정했기 때문에 email 양식에 맞지 않으면 오류 메세지가 발생합니다.

 

이름/이메일 모두 전송 시(Network 상)

 

이메일만 전송 시 (Network상)

 

POST

<form action="" method="POST">
        <label for="username">이름 : </label>
        <input type="text" name="name" id="username" placeholder="이름을 입력하세요.">

        <br>
        
        <label for="email">이메일 : </label>
        <input type="email" name="email" id="email" placeholder="이메일을 입력하세요">

    <br><br>
    <!-- input:submit-->
    <!-- input[submin]-->
    <input type="submit" value="등록">
    </form>

url 뒤에 붙지 않음

url 상에 표시 되진 않지만 서버 상으로는 데이터들이 전송된 것을 확인할 수 있습니다.

(서버 설정을 안했다면 오류 남!)

TEXT 관련

 

[type:text]

fieldset - 그룹핑 용도

legend - 그룹핑에 대한 제목 생성

value - 초기값 설정

required - 필수 입력 값

<form action="" method="GET">
        <fieldset> <!-- 그룹핑 용도 -->
            <legend>text관련</legend> <!-- 그룹핑에 대한 제목 생성 -->
                <label for="userId">아이디 : </label>
                <input type="text" name="id" user="userId" value="honggd" required>
                <!-- required : 필수 입력 값 (입력하지 않으면 제출 안됨)-->
                <br>   
        </fieldset>
    <input type="submit" value="제출">
    </form>

fieldset에 의하여 그룹핑 되었기 때문에 큰 네모 박스 생성

legend에 의하여 그룹핑에 대한 이름 생성하였으므로 'text관련'이라는 큰 제목 생성

value에 의하여 초기값이 생성되어 아이디 박스에 'honggd'가 입력

아이디는 필수 값이므로 입력하지 않으면 오류 메세지 발생 (공백이라도 입력하면 제출됨..)

 

[type:password]

maxlength

- 최대 길이 설정

<label for="password">비밀번호</label>
<input type="password" name="password" id="password" maxlength="12">

12자리가 넘어가면 더이상 입력이 되지 않습니다. (하지만.. 뚫을 수 있음^^ 신뢰 0!! 나중에 자바스크립트로 설정해야됨)

 

[type:search]

<label for="search">검색 : </label>
<input type="search" name="search" id="search">

값을 입력하면 X 마크가 뜨는 것을 확인할 수 있습니다.

 

[type:url]

<label for="url">홈페이지 : </label>
<input type="url" name="url" id="url" value="http://">

초기값 http://를 지우고 url형식에 맞지 않은 값을 입력하면 위와 같이 오류 메세지가 발생!

 

[type:tel]

<lable for="tel">전화번호 : </lable>
<input type="tel" name="tel" id="tel">

핸드폰으로 접속하면 한글키패드가 아닌 숫자 키패드가 자동으로 나옵니다.

 

[textarea]

                <label for="memo">메모</label>
                <textarea name="memo" id="memo" cols="30" rows="3">a
b
c
    d
e                
                </textarea> <!-- 초기값을 value가 아닌 abcde 작성한 곳에!-->

메모장의 크기를 지정해놨지만 크기 조절이 가능합니다.

또한 초기값을 value에 작성하는 것이 아닌 textarea 시작/종료 태그 사이에 입력해주며, 탭/개행 등을 모두 인식합니다.

메모장의 크기를 고정시키고 싶다면,  스타일 속성을 추가해줍니다. (style="resize:none;")

style="resize:none;"

스타일 속성 지정 시

숫자 관련

[type:number]

min - 최소

max - 최대

<form action="">
        <fieldset>
            <legend>숫자</legend>
            <label for="amount">수량 : </label>
            <input type="number" name="amount" id="amount" min="0" max="10">
        </fieldset>
    <button type="submit">제출</button>
    </form>

위아래 화살표로 수량을 늘릴 수도 줄일 수도 있습니다. (기본값 : 1)

2개씩 늘리거나 줄이고 싶다면 step 속성 이용! (step="숫자")

step="2"

 

[type:range]

<label for="score">점수 : </label>
<input type="range" name="score" id="score">

날짜 / 시간

[type:date]

<form action="">
        <fieldset>
            <legend>날짜/시간</legend>
            <label for="date">날짜 : </label>
            <input type="date" name="date" id="date" placeholder="날짜를 입력하세요.">
        </fieldset>
	<button type="submit">제출</button>
    </form>

서버에 yyyy-mm-dd의 형식으로 전달 되기 때문에 value(초기값)을 지정하고 싶다면 해당 양식과 동일하게 설정해줘야합니다.

 

[type:time]

<label for="time">시간</label>
<input type="time" name="time" id="time" placeholder="시각을 입력하세요.">

time=19%3A04를 보면 %3A이 ':'을 의미하고, 24시간제를 적용한 19시 형식으로 전달되기 때문에 value(초기값)을 지정하고 싶다면 해당 양식과 동일하게 설정 (hh:mi)해줘야 합니다. (19:04)

 

[type:datetime-local]

<label for="datetime-local">시각 : </label>
<input type="datetime-local" name="datetime-local" id="datetime-local">

날짜와 시간을 같이 표현할 수도 있습니다.

다만! value(초기값) 설정 시 'yyyy-mm-ddThh:mi' 형식으로 지정해줘야 합니다. (2022-05-05T09:20)

선택관련

[type:radio]

- 제시된 옵션 중 택일 해야하는 경우 사용

 <form action="">
        <fieldset>
            <legend>선택관련</legend>
            <!-- radio : 제시된 옵션 중 택일해야 하는 경우 사용 (선택 후 취소 불가) --> 
            <span>성별 : </span>
            <label for="gender0">남</label>
            <input type="radio" name="gender" id="gender0" value="남">
            <label for="gender1">여</label>
            <input type="radio" name="gender" id="gender1" value="여">

        </fieldset>
        <button>제출</button>
    </form>

※ name값을 동일하게 해야 택1 할 수 있음!

name값을 다르게 줄 경우 두 개 모두 선택 가능하므로 의미가 없습니다.

또한, radio는 value값을 서버로 전송 시키기 때문에 value값을 생략하면 "남" 혹은 "여"가 아닌 "on"이 넘어가므로 의미가 없습니다.

반드시! value값을 지정해줘야 합니다.

 

기본 값 설정 시 checked 속성 이용!!

checked

 

 

[type:checkbox]

- 제시된 옵션 중 복수개 선택이 가능한 경우 사용

<!-- checkbok는 제시된 옵션 중 복수개 선택이 가능한 경우 사용 -->
<span>취미 : </span>
<!-- (input:checkbox[name=hobby value]#hobby$+lable[for=hobby$])*3 -->
<label for="hobby1">축구</label>
<input type="checkbox" name="hobby" id="hobby1" value="축구" checked>
<label for="hobb2">농구</label>
<input type="checkbox" name="hobby" id="hobby2" value="농구">
<label for="hobby3">야구</label>
<input type="checkbox" name="hobby" id="hobby3" value="야구">

radio와 마찬가지로 value값이 서버에 전송 되기 때문에 반드시 value값을 명시적으로 지정해줘야 합니다.

 

[select]

<label for="nation">국적 : </label>
<select name="nation" id="nation">
	<option value="kor">한국</option>
	<option value="jpn">일본</option>
	<option value="usa" selected>미국</option>
</select>

마찬가지로 value값이 서버에 전송되며, selected 속성으로 초기값을 지정해줄 수 있습니다.

 

[datalist]

- 옵션 제공해주지만, 옵션에 없으면 사용자가 입력하여 선택

<label for="pet">반려동물 : </label>
<input type="text" name="pet" id="pet" list="pets">
<datalist id="pets">
	<option value="강아지"/>
	<option value="고양이"/>
	<option value="앵무새"/>
</datalist>

option에 없는 '참새'를 입력하고 제출하니 잘 전송되는 것을 확인할 수 있습니다.

기타

[type:color]

<form action="">
	<fieldset>
		<legend>기타</legend>
		<label for="color">컬러</label>
		<input type="color" name="color" id="color">
	</fieldset>
<button>제출</button>
</form>

color=%2337d757이 서버에 전송 되었는데 %23은 '#'을 나타내므로 value값 설정 시 '#색깔코드'로 전송해야 합니다.

value="#37d757"

 

[type:file]

<label for="file">파일 : </label>
<input type="file" name="file" id="file">

[type:hidden]

- 눈에 보이진 않지만 name=value가 전송됨

<label for="">안보이지만 전송 : </label>
<input type="hidden" name="abc" value="가나다">

특별히 값을 입력하고 전송한 건 아니지만, 설정했던 name=value가 서버 쪽으로 전송 되었습니다.

 

[hidden과 상반된 속성 disabled]

<input type="color" name="color" id="color" value="#37d757" disabled>

만약 color를 disabled처리를 한다면, 사용하지 않겠다는 의미로 name, value값이 있어도 전송되지 않습니다. (입력 조차 제한됨)

이렇게 color에 대한 값은 서버 쪽으로 전송 되지 않는 것을 확인할 수 있습니다.

 

버튼 종류

<input type="button" value="버튼">
<input type="submit" value="제출">
<input type="reset" value="초기화"> <!-- 초기값으로 돌려줌 -->
<br>
<button type="button">버튼</button>
<button type="submit">제출</button> <!-- button 태그의 type 속성 기본값은 submit!! -->
<button type="reset">초기화</button>

button 태그의 type 속성 기본값은 submit이므로 type 생략 시 헷갈릴 수 있으니 주의!!

 

 

 

 

※ HTML URL Encoding Reference

https://www.w3schools.com/tags/ref_urlencode.asp

 

HTML URL Encoding Reference

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

저작자표시

'HTML > HTML' 카테고리의 다른 글

HTML) 멀티 미디어 관련 태그  (0) 2022.05.11
HTML) 링크 관련 태그 (a 태그의 href 속성, target 속성)  (0) 2022.05.11
HTML) 이미지 관련 태그 (절대주소, 상대주소, 절대크기, 상대크기)  (0) 2022.05.11
HTML) block / inline 요소  (0) 2022.05.11
HTML) table 관련 태그  (0) 2022.05.11

관련글

티스토리툴바