2.6 HTML 폼(form) 총 정리

폼(form)은 HTML에서 사용자와 상호작용해서 정보를 입력받고 서버로 전송하기 위한 양식을 의미한다.

웹페이지에서 폼은 매우 흔하게 찾아 볼 수 있다.

ex) 네이버 로그인 화면

• 로그인 상태 유지 체크박스
• 아이디 비번 입력창
• 로그인, 회원가입, 아이디, 비번 찾기 등등

 

1. form 태그

form 태그는 폼 양식을 의미하는 태그이다.

HTML의 폼을 구성하는 태그는 모두 form 태그 안에 작성한다.

양식

💡 <form action =”서버 url” method = “get 또는 post”

action, method 속성을 함께 사용한다.

 

action 속성

폼 요소와 사용자와 상호작용으로 입력받은 값을 전송할 url 서버의 주소를 적는다.

 

method 속성

입력받은 값을 서버에 전송할 때 송신 방식을 적는다.

속성값으로 get 또는 post를 사용할 수 있다.

폼 속성에 들어가는 값은 일반적으로 백엔드 개발자가 처리하므로 #으로 두면 된다.

보안이 요구되는 정보이면 post, 아니면 get

 

 

2. input 태그

로그인 페이지의 아이디와 비밀번호처럼 입력받는 요소를 생성할 때는 input 태그를 사용합니다.

• input 태그에는 type, name, value 속성이 있는데 type 속성만은 필수로 사용해야한다
• 쉽게 말해 페이지에서 사용자로부터 정보를 입력 받을 때 사용한다.

 

형식

💡 <input type = “종류” name = “이름” value = “초깃값”>

name 속성

name 속성에는 입력요소의 이름을 작성한다.

입력요소가 서버로 전송 될때 ,name 속성에 적힌 값이 이름으로 지정된다.

이 이름으로 입력요소를 식별 할 수 있다.

 

value속성

value 속성에는 입력요소의 초깃값을 작성한다.

대부분의 상황에서는 수동적으로 값을 받지만, 상황에 따라 초기값을 설정해야하는 경우에 사용

 

type 속성

type 속성은 입력된 값에 따라 상호작용 요소의 종류를 결정한다

속성값	설명
text	한 줄 텍스트를 입력할 수 있는 요소
password	비밀번호를 입력할 수 있는 요소
tel	전화번호 형식을 입력할 수 있는 요소
number	숫자만 입력할 수있는 요소
url	URL 주소 형식을 입력할 수 있는 요손
search	검색용 텍스트를 입력할 수 있는 요소
email	이메일 형식을 입력할 수 있는 요소
checkbox	체크박스 요소
radio	라디오버튼 요소
file	파일 업로드 요소
image	이미지 버튼 요소, 이미지 파일 주소를 같이 쓸 src 속성을 사용해야한다. alt는 사용x
hidden	사용자 눈에 보이지 않는 입력요소
date	날짜(연, 월, 일)를 선택할 수 있는 입력 요소
datetime-local	사용자 시간대에 맞는 날짜(연, 월, 일 , 시 분)를 선택할 수 있는 요소
month	날짜(연, 월)를 선택할 수 있는 요소
week	날짜(연, 주자)를 선택할 수 있는 요소
time	시간을 선택할 수 있는 입력요소
range	숫자 범위를 선택할 수 있는 슬라이드 요소
color	색상을 선택할 수 있는 요소
submit	폼 전송 역할을 하는 버튼 요소
reset	폼 요소에 사용자가 입력한 값을 초기화 하는 버튼 요소

 

<form action="#">
        <input type="text">
        <input type="password">
        <input type="tel">
        <input type="number">
        <input type="url">
        <input type="search">
        <input type="email">
        <input type="checkbox">
        <input type="radio">
        <input type="file">
        <input type="button">
        <input type="image" src="facebook.png" alt="페이스북 버튼">
        <input type="hidden">
        <input type="date">
        <input type="datetime-local">
        <input type="month">
        <input type="week">
        <input type="time">
        <input type="range">
        <input type="color">
        <input type="submit">
        <input type="reset">
      </form>

 

 

3. label 태그

labe 태그는 form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용한다.

• label 태그를 잘 사용하면 label 태그만 클릭해도 상호작용 요소를 선택할 수 있다.
• 시각 장애인이 웹을 탐색시 사용하는 스크린 리더기가 label 태그로 연결된 상호작용 요소를 쉽게 식별할 수 있어서 웹접근성 향상을 위해서도 필수로 사용하길 권장한다.

lable 태그는 두가지 방법으로 구분한다.

암묵적인 방법

• label 태그에 상호작용 요소를 포함하는 방법

<form>
	<label>
		아이디
		<input type ="text">   ->   상호작용 요소
	</label>
</form>

명시적인 방법

• label 태그의 for 속성과 상호작용 요소의 id 속성을 같은 값으로 설정하는 방법

<form>
	<label for = "username"> 비밀번호 
		<input type = "text" id= "username">
	</label>
</form>

암묵적인 방법 + 명시적인 방법

<form>
	<label for = "username"> 비밀번호 
		<input type = "text" id= "username">
	</label>
</form>

 

 

4. fieldset와 legend 태그

form태그 안에 사용된 상호작용 요소를 fieldset 태그를 통해 그룹지을 수 있다.

fieldset 태그를 사용하면 그룹별로 박스 모양의 테두리가 생기고, 이 테두리에 legend 태그로 이름을 붙일 수 있다.

형식

<form action ="#">
	<filedset>
		<legend> 그룹이름 </legend>
			<input type ="text">  <- 상호작용 요소
	</filedset>
</form>

예시

<form action="#">
        <fieldset>
          <legend>기본 정보</legend>      
          <p>
            <label for="userid">아이디</label>
            <input type="text" id="userid">
          </p>
          <p>
            <label for="passwd">비밀번호</label>
            <input type="password" id="passwd">
          </p>
        </fieldset>
        <fieldset>
          <legend>선택 정보</legend>
          <p>
            <label for="age">나이</label>
            <input type="number" id="age">
          </p>
          <p>
            <label for="recommender">추천인</label>
            <input type="text" id="recommender">
          </p>
        </fieldset>
      </form>

 

 

5. textarea 태그

여러 줄의 입력요소를 생성할때는 input 태그가 아닌 textarea 태그를 사용한다.

웹사이트에서 글을 작성할때 사용하는 입력요소는 대부분 textarea 태그를 생성한다.

형식

💡 <textarea> 초깃값 </textarea>

• textarea 태그는 input 태그와는 다르게 닫는 태그가 있다.
• input 태그의 value가 초깃값을 설정했다면 textarea태그는 콘텐츠 부분에서 초깃값을 설정한다

<form action="#">
        <fieldset>
          <legend>블로그 글쓰기</legend>      
          <p>
            <label for = "title">제목
                <input type = "text" id = "title" name = "title"> 
            </label>
          </p>
          <p>
            <label for="desc">내용</label>
            <textarea id="desc" id="desc">100자 이상 입력</textarea>
          </p>
        </fieldset>
      </form>

 

 

6. select, option, optgroup 태그

select 태그를 사용하면 콤보박스를 생성 할 수 있다.

콤보 박스에 항목을 하나 추가할때는 oprion 태그를, 항목을 그룹으로 묶고 싶다면 optgroup 태그를 사용한다.

• option 태그는 서버의 전송할 값 value를 지정할 수 있다. 속성을 생략한다면 option 태그의 콘텐츠가 value로 전달 된다.
• optgroup 태그로 항목을 그룹 지을 때 반드시 label 속성으로 그룹명을 지정해야한다.

option 태그

<fieldset>
        <legend>개인 정보 입력</legend>
        <label for ="desc">지역</label>
    <select name = "city" id="city">
        <option vlaue = "강북구">강북구</option>
        <option vlaue = "강남구">강남구</option>
        <option vlaue = "서초구">서초구</option>
        <option vlaue = "중원구">중원구</option>
        <option vlaue = "분당구">분당구</option>
    </select>
    </fieldset>

optgroup태그

<body>
    <fieldset>
        <legend>개인 정보 입력</legend>
        <label for ="desc">지역</label>
        <select name = "city" id="city">
            <optgroup label = "서울시">
                <option vlaue = "강북구">강북구</option>
                <option vlaue = "강남구">강남구</option>
                <option vlaue = "서초구">서초구</option>
            <optgroup label = "경기도 성남시">
                <option vlaue = "중원구">중원구</option>
                <option vlaue = "분당구">분당구</option>
    </select>
    </fieldset>
</body>

 

size 속성

size 속성은 콤보박스에서 화면에 노출되는 항목갯수를 지정하는 속성이다.

속성값으로 노출될 항목의 숫자를 적는다. 생략시에는 기본으로 1개의 항목이 노출된다.

<fieldset>
        <legend>개인 정보 입력</legend>
        <label for ="desc">지역</label>
        <select name = "city" id="city" size="3">
                <option vlaue = "강북구">강북구</option>
                <option vlaue = "강남구">강남구</option>
                <option vlaue = "서초구">서초구</option>
                <option vlaue = "중원구">중원구</option>
                <option vlaue = "분당구">분당구</option>
        </select>
    </fieldset>

 

 

multiple 속성

select로 만든 콤보박스는 기본으로 1개 항목만 선택할 수 있다. 그러나 multiple 속성을 사용하면 여러 항목을 동시에 선택 할 수 있게된다.

ctrl 클릭으로 다중선택이 가능하다.

<fieldset>
        <legend>사는 곳 입력</legend>
        <label for ="desc">지역</label>
        <select name = "city" id="city" multiple>
                <option vlaue = "강북구">강북구</option>
                <option vlaue = "강남구">강남구</option>
                <option vlaue = "서초구">서초구</option>
                <option vlaue = "중원구">중원구</option>
                <option vlaue = "분당구">분당구</option>
        </select>
    </fieldset>

selected 속성

콤보박스는 첫번째 option 태그의 값이 기본 선택된 상태로 표시된다.

selected 태그를 통해서 콥보박스의 기본 선택값을 변경할 수 있다.

만약 여러개의 selected 태그를 사용하면 마지막 option 태그가 기본값으로 선택된다.

<fieldset>
        <legend>개인 정보 입력</legend>
        <label for ="desc">지역</label>
        <select name = "city" id="city" >
                <option vlaue = "강북구">강북구</option>
                <option vlaue = "강남구">강남구</option>
                <option vlaue = "서초구" selected>서초구</option>
                <option vlaue = "중원구">중원구</option>
                <option vlaue = "분당구">분당구</option>
        </select>
    </fieldset>

 

 

7. button 태그

버튼 요소는 input 태그에서 type 속성값을 button으로 지정해 설정할 수 있고 따로 button 태그로 생성 할 수도 있다.

형식

💡 <button type = “종류”> 버튼 내용 </button>

type 속성값은 버튼의 역할에 따라 정의할 수 있다.

서버에 보낸다 : submit

초기화 한다 : reset

단순 버튼이다 : button

<button type ="submit">
	<img src = "facebook.png" alt="페이스북 버튼">
	페이스북에 등록하기    
</button>

• input 태그로 만든 버튼이랑 뭐가 다르냐
  • input태그 이후에 button 태그가 등장했다.
  • 이미지,태그 같은 것들을 포함할 수 있어서 버튼 요소를 꾸미기 더 수월하다는 장점이 있다.

 

 

8. 폼 관련 태그에서 사용할 수 있는 추가 속성

diabled 속성

💡 <태그 disabled>

• 상호작용 요소를 비활성화하며 input, textarea, select, button 태그에 사용할 수 있다.
• 입력요소 입력 X, 목록상자 체크 X, 버튼요소 클릭 X

 

readonly 속성

💡 <태그 readonly>

• 상호 작용 요소를 읽기 전용으로 변경한다.
• 입력요소에 텍스트 입력 불가능, 그러나 요소 선택, 복사는 가능

 

maxlength 속성

💡 <태그 maxlength = “숫자”>

• 입력 가능한 글자수를 제한한다.

 

checked 속성

💡 <태그 checked>

• 요소를 선택된 상태로 표시한다.
• 선택 요소가 있는 상호작용 요소인 radio, checkbox에만 사용가능하다.

 

placeholder 속성

💡 <input placeholder = ”입력한 값에 대한 힌트”>

<input type="tel" placeholder="전화번호를 입력하시오">

• 입력요소에 어떠한 값을 입력하면 되는지 힌트를 적는 용도이다.
• 사용자가 올바른 값을 입력하도록 유도하고 입력시 힌트는 사라진다.