HTML5 - Form 태그

입력 양식 태그

 

폼 태그

- 폼태그는 사용자에게 하나보다 더 많은 데이터를 받고자 할 때 사용한다

- 폼태그는 <form> </form> 안에 <input> 과 같은 태그를 집어 넣어 사용한다

- <form> 태그는 action, method, type, name 등의 속성이 있다.

- 속성 중 method는 데이터를 전송하는 규격과도 같고 GET과 POST 방식이 있다

 

 

Get 방식

- get 방식은 보내고자 하는 데이터가 URL에 그대로 드러난다

- URL에 ?를 붙여 데이터(파라미터)를 보내는데 이로 인해 어떤 데이터가 전송되는지 바로 파악된다

- 이러한 특성 때문에 보안을 요구로 하는 데이터는 Get 방식으로 보내지않는다

<form action="/search" method="get">
        <label for="query">Search:</label>
        <input type="text" id="query" name="query" placeholder="Enter search term">
        <button type="submit">Submit</button>
</form>

 

Post 방식

- Get 방식과 다르게 URL에 파라미터를 붙여 서버로 전송하지 않는다

- 그 대신 HTTP Request를 통해 데이터를 전송한다

- 기본적으로 클라이언트 측에서 확인이 어렵기 때문에 보안상 우위에 있다

 <form action="/submit" method="post">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" placeholder="Enter username">
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" placeholder="Enter password">
        <button type="submit">Login</button>
    </form>

 

 

input 태그의 속성 

- input 태그는 다양한 속성을 통해 텍스트를 입력 받을지, 체크박스가 될 것인지 등 다양한 폼 형태를 선택할 수 있다

- 또한 예를 들어 여러개의 텍스트 속성의 input태그와 submit 속성의 input태그가 있다면 submit input태그가 눌려질 시

- form 태그 내의 input 태그들에 입력된 데이터가 다른 곳으로 전송되는 것이다.

- input 태그에 name 속성은 데이터가 form태그를 통해 보내질 때 데이터의 이름으로 설정된다

- 예를들어 text속성의 input태그의 이름이 name이면 그 input태그에 입력한 값이 form을 통해 보내지면 name="이름" 이렇게 되는거다

 

text

: 사용자가 텍스트를 입력할 수 있는 텍스트 박스를 제공한다

<input type="text" name="id">

 

password

: 사용자에게 비밀번호 형식으로 데이터를 받게한다.

: text와의 차이점은 입력창에 텍스트가 나타나지 않고 *** 처럼 점으로 나타난다

<input type="password" name="pw">

 

textarea

: 여러 줄의 텍스트를 입력할 수 있는 영역을 제공한다

<textarea rows="4" cols="50"></textarea>

 

radio

: 여러 옵션 중 하나만 선택 가능한 라디오 버튼을 제공한다

<input type="radio" name="gender" value="male">

 

checkbox

: 여러 옵션을 복수 선택할 수 있는 체크박스를 제공한다

<input type="checkbox" name="hobby" value="reading">

 

button

: 클릭 가능한 버튼을 제공한다.

: JS와 연결해서 특정 기능을 실행하는 트리거로 자주 만든다

<input type="button" value="클릭">

 

select - option

: 드롭다운 목록을 생성하는데 그 내용은 option 태그로 결정된다

<select><option value="1">옵션1</option></select>

 

date

: 달력 형태나 년월일 형식의 날짜 선택 입력 필드를 제공한다

<input type="date" name="birthday">

 

email

: 텍스트 박스와 유사하지만 이메일 형식의 데이터를 넣지 않으면 데이터를 받지 않는다

<input type="email" name="userEmail">

 

url

: 이메일과 마찬가지로 url 형태의 값만 받는 텍스트 상자이다

<input type="url" name="website">

 

label

: input태그의 제목을 정의하는 태그로 다른 input태그와 연결해서 사용해야한다

: 사용하기 위해서는 for 속성의 값을 input 태그의 id이름과 동일하게 설정해줘야 한다

<label for="text">웹사이트 이름을 입력하세요</lable>
<input type="text" name="website" id="text">

 

reset

: form 태그 내 입력한 값을 초기화 시킨다

<input type="reset" value="초기화">

 

submit

 : form 태그의 내용을 전송한다.

<input type="submit" value="전송">

 

 

입력 특성 모음

- 입력 특성은 말 그대로 텍스트나 비밀번호, 이메일 등 사용자에게 입력을 받는 폼에 넣는 특성이다

- 참고로 readonly로 해놓으면 단순히 수정이 아니라 폼 정보가 전송이 되지 않는다 (Spring boot에서만 그런지 아니면 순수 HTML에서도 그런지는 확인해봐야 할 듯 하다)

 

• placeholder: "사용자명을 입력하세요" 와 같은 힌트를 제공한다
• required: 입력하지 않을 시 넘어가지 않는다
• autofocus: 페이지 로드 시 자동으로 해당되는 input에 포커스가 된다
• disabled: 입력 필드 비활성화한다
• readonly: 사용자가 수정하지 못하도록 한다

 

예시 코드

<form>
    <div>
        <label for="username">사용자 이름</label>
        <input 
            type="text" 
            id="username" 
            name="username" 
            placeholder="홍길동" 
            required 
            autofocus
        >
    </div>

    <div>
        <label for="email">이메일</label>
        <input 
            type="email" 
            id="email" 
            name="email" 
            placeholder="example@email.com" 
            readonly 
            value="admin@company.com"
        >
    </div>

    <div>
        <label for="phone">연락처</label>
        <input 
            type="tel" 
            id="phone" 
            name="phone" 
            placeholder="010-1234-5678" 
            disabled 
            value="010-0000-0000"
        >
    </div>

    <button type="submit">제출</button>
</form>