Untitled_Blue

[HTML] 양식을 만들다. 폼 (Form) 태그 본문

Web/HTML

[HTML] 양식을 만들다. 폼 (Form) 태그

Untitled_Blue 2023. 6. 14. 23:07
반응형

안녕하세요. 이번 글은 HTML 내 사용가능한 Form 태그에 대한 설명입니다.

- Form 이란?

  • 하나의 양식으로서 정보를 입력받는 공간이며 이들을 통해 서버에 필요한 정보를 제공할 수 있는 공간
  • 서버와 클라이언트가 소통할 수 있는 하나의 수단이기도 하다.

- 폼의 기반 작성 - <form> </form>

먼저 폼을 선언하는 기본적인 태그는 다음과 같다.

  • <form action="[이동할 공간]"> </form>
속성 설명
action 폼에서 입력받은 내용을 처리할 프로그램 지정
name Javascript로 폼을 제어할 때 사용할 폼의 이름 지정
target action에서 설정한 프로그램을 새 창으로 열도록 설정
method 입력내용을 서버 프로그램에 전달할 방법 지정
+ get, post로 구성되어 있음.
autocomplete 자동완성 기능 사용 여부 (on, off로 설정 가능)
  • get : 데이터의 송신 용량에 제한이 있으며 url에 입력한 값이 그대로 노출되는 만큼 보안성이 좋지 않다.
  • post : 데이터의 송신 용량에 제한이 없으며 url에 입력값이 드러나지 않아서 보안성이 보장된다.

- 폼을 하나의 상자에 묶다 ! - <fieldset>, <legend>

  • <fieldset></fieldset> : 그룹으로 묶는데 가장 먼저 사용되는 태그
  • <legend></legend> : fieldset 안에 사용되며 그룹의 이름을 지정하기 위한 태그
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=chorme">
    <title>Document</title>
</head>
<body>
    <fieldset>
        <legend>첫번째 필드</legend>

        <form>
            <label>ID : <input type="text"></label>
            <label>PW : <input type="password"></label>
        </form>
    </fieldset>

</body>
</html>

다음과 같이 두 개의 태그를 통해 영역을 설정하고 해당 영역의 이름을 설정가능하다는 점을 확인할 수 있다.

+ Label 태그 사용법

Label은 포스트잇과 같으며 폼 요소를 옆에 붙어서 폼 요소에 대한 정보를 제공해주는 역할을 하는 태그이다.

  • <label> [텍스트] ... <input type="속성값"> </label>
  • <label for="속성명"> [텍스트] </label> <input type="종류" id="속성명"> (추천)

- input 태그 속성의 종류

1) 텍스트 입력

종류 설명 속성
text 한 줄짜리 텍스트 입력 - size : 필드의 길이 설정
- value : 필드에 보여줄 내용
- maxlength : 입력가능한 최대길이
password 비밀번호 입력 (마스킹 자동 처리)
search 검색창 필드 구현  
url URL 주소 입력하는 필드 구현
email 이메일 주소 입력하는 필드 구현
tel 전화번호를 입력하는 필드 구현

2) 버튼

종류 설명
submit 입력한 내용 제출
reset 입력한 내용 초기화 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=chorme">
    <title>Document</title>
</head>
<body>
    <form action="#">
        텍스트 : <input type="text"> <br>
        비밀번호 : <input type="password"><br>
        검색창 : <input type="search"><br>
        주소창 : <input type="url"><br>
        이메일 : <input type="email"><br>
        전화번호 : <input type="tel"><br>

        <input type="submit">
        <input type="reset">
    </form>

</body>
</html>

상단 소스코드를 실행해서 모든 필드에 값을 입력한 결과이다. 다음과 같이 비밀번호의 경우에는 타인에게 노출되지 않도록 기본적으로 마스킹 처리가 된 점을 확인할 수 있다. 또한 제출 버튼을 누르면 form action에서 설정해둔 페이지로 정보가 전송될 것이며 초기화 버튼을 누르면 입력한 내용이 모두 지워지는 점 또한 확인할 수 있다.

좌측의 이미지를 보면 검색창에서 내용을 입력하고 있으면 맨 오른쪽에 X 버튼이 보일 것인데 이는 검색창의 입력한 내용을 지워주는 역할을 담당한다. 우측의 이미지를 보면 주소창에 url를 입력하지 않고 양식과 거리가 먼 문자를 입력했을 때의 상황이다. 이를 통해 주소창, 이메일, 전화번호 등과 같이 특수한 입력창들은 양식에 알맞게 입력했는지를 검사해주는 기능도 추가되어있다는 점을 알 수 있다. 제출을 누르면 올바른 형식으로 다시 입력하도록 유도한다는 점을 볼 수 있다.

3) 선택

종류 설명 속성
checkbox 여러 항목 중 2개 이상 선택 가능한 버튼 value : 서버에 넘겨줄 값 지정
checked : 기본적으로 선택될 곳 지정
radio 여러 항목 중 한 개만 선택 가능한 버튼

4) 시간, 날짜

종류 설명
date 사용자 국가 기준 날짜 (년도, 월, 일) 입력
month 사용자 국가 기준 년도와 월 입력
week 사용자 국가 기준 년도와 주 입력
time 사용자 국가 기준 시각 (시, 분, 초, 분할 초) 입력
datetime-local 사용자 국가 기준 날짜와 시각 입력 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=chorme">
    <title>Document</title>
</head>
<body>
    <form action="#">
        <input type="checkbox"value="001">001
        <input type="checkbox"value="002">002
        <input type="checkbox"value="003">003
        <input type="checkbox"value="004">004
        <input type="checkbox"value="005">005 <br>

        <br>

        <input type="radio" name="gender" value="men"> 남자
        <input type="radio" name="gender" value="women"> 여자

        <br><br>

        Date : <input type="date"> <br>
        Time : <input type="time"> <br>
        Month : <input type="month"> <br>
        Week : <input type="week"> <br>
        Datetime-local : <input type="datetime-local"> <br>
    </form>

</body>
</html>

다음과 같이 radio를 구현할 때는 여러 개의 radio를 같은 주제로 묶을 때는 반드시 name 속성에 대한 값을 모두 일치하게 입력해야 된다는 점을 확인할 수 있다. (중복 체크와 정확한 정보를 서버에 전달하기 위함이다.)

5) 숫자, 범위

종류 설명 속성
number 숫자를 직접 입력 및 설정하는 태그 - min, max : 최소/최대값 설정
- step : 숫자 간격 설정
- value : 초기값 설정
range 스핀박스를 통한 숫자 값 설정하는 태그 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=chorme">
    <title>Document</title>
</head>
<body>
    <form action="#">
        범위 : <input type="range" min="10" max="50" step="5" value="10" name="in_range"> <br>
        숫자 : <input type="number" min="0" max="100" step="10" value="10">
    </form>

</body>
</html>

다음과 같이 number의 경우 위 아래 버튼을 통해 일정한 간격으로 숫자의 크기를 조정할 수 있는 점과 range는 스핀 박스를 통해 숫자의 크기를 조정할 수 있는 점을 확인할 수 있다. 물론 최소값과 최대값의 범위 밖을 벗어날 수 없다.

- 입력 태그에 공통적으로 쓰이는 속성 모음

속성 설명
autofocus 자동으로 입력 커서에 포커스를 주도록 설정
placeholder 입력창에 힌트 및 멘트를 표시하도록 설정
readonly 읽기만 가능하고 쓰기는 불가능하도록 설정
required 필수 입력을 유도하도록 설정
minlength, maxlength 입력가능한 최소값과 최대값 설정

- 기타 태그

1) 드롭다운 선택창 - <select>, <option>

! select 태그 속성

종류 설명
size 드롭다운 목록에서 보여줄 항목의 개수 설정
multiple 목록에서 여러 개의 항목 선택 가능하도록 설정

! option 태그 속성

종류 설명
value 항목 선택 시 서버에 전송할 값 설정
selected 기본적으로 선택되어 있을 항목 설정 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=chorme">
    <title>Document</title>
</head>
<body>
    <form action="#">
        <select>
            <option value="001" selected>선택옵션 001</option>
            <option value="002">선택옵션 002</option>
            <option value="003">선택옵션 003</option>
            <option value="004">선택옵션 004</option>
            <option value="005">선택옵션 005</option>
        </select>

        <br><br><br>

        <select size="3" multiple>
            <option value="006" selected>선택옵션 006</option>
            <option value="007">선택옵션 007</option>
            <option value="008">선택옵션 008</option>
            <option value="009">선택옵션 009</option>
            <option value="010">선택옵션 010</option>
        </select>
    </form>

</body>
</html>

다음과 같이 상단 소스코드를 실행한 결과를 확인해보면 좌측처럼 하나만 선택할 수 있으며 하나씩 보이도록 구현 가능한 점을 확인할 수 있으며 selected된 곳이 자동적으로 선택된 점을 볼 수 있다. 그리고 우측을 보면 size를 통해 한 번에 3개의 항목을 볼 수 있으며 multiple를 통해 여러 항목을 선택할 수 있는 점도 확인할 수 있다.

2) datalist 태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=chorme">
    <title>Document</title>
</head>
<body>
    <form action="#">
        <input type="text" list="yes_or_not">
        <datalist id="yes_or_not">
            <option value="yes">YES</option>
            <option value="no">NOT</option>
        </datalist>
    </form>

</body>
</html>

다음과 같이 datalist를 통해 입력창에 직접 입력하지 않고도 사전에 설정해둔 값 중에서 선택하도록 유도할 수 있다는 점을 확인할 수 있다. 또한 select에는 없는 기능인 검색을 통한 항목 조회와 선택이 가능하다. 이때 datalist는 text 필드와 같이 사용해야 하는데 데이터 목록의 속성 중 하나인 id와 input text의 속성 중 하나인 list의 값이 일치해야 한다.

 

추후 HTML에 대한 추가적인 보충이 필요하면 보완해 나가겠습니다. 감사합니다.

반응형

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

[HTML] 하이퍼링크, iframe, Bookmark  (0) 2023.06.13
[HTML] 이미지, 오디오 등 컨텐츠 추가 태그  (0) 2023.06.13
[HTML] 목록과 표 만들기 - <table>, <li>, <ul>, <ol>  (0) 2023.06.12
[HTML] 텍스트 관련 태그 정리  (0) 2023.06.12
[HTML] HTML 기초  (0) 2023.06.11
'Web/HTML' Related Articles more