HTML, CSS, JavaScript

[HTML] HTML의 기초 구성 - 입력 태그

BGK97 2025. 1. 13. 17:00

<form> 태그

    • 웹페이지에 제출하는 용도인 폼 형식을 만드는 가장 기본적인 태그
    • <form>내의 정보는 웹 서버로 전달되어 작업을 처리
<form [속성="속성 값"]>여러 폼...</form>

 

<form> 태그에 사용하는 속성들

1. method

  • 사용자가 입력한 내용을 서버쪽 프로그램에 넘기기 위해 방법을 지정하는 속성
    • get - 256~4096 Byte 제한으로 서버에 넘길 수 있으며, 주소 표시줄에 입력한 내용이 그대로 드러남
    • post - 입력 내용 길이에 제한 받지 않으며, 입력한 내용도 드러나지 않음
<form method="post">...</form>

2. name

  • 자바스크립트로 폼을 제어할 때, 사용할 폼의 이름 지정
<form method="post" name="test">...</form>

3. action

  • form 태그 안의 내용을 처리할 서버 프로그램 지정
<form action="test.jsp>...</form>

4. target

  • action 속성에서 지정한 스크립트 파일을 현재 창이 아니라, 다른 위치에서 열게하는 속성
<form action="test.jsp target="_blank">...</form>
  • blank 속성은 이미 열려있는 탭에서 페이지 전환이 되는 것이므로 헷갈리지 않기
  • _blank가 새 탭에서 여는 옵션!!

5. autocomplete

  • 자동완성 기능으로, 사용자가 예전에 입력했던 내용을 기억하여 비슷한 내용이 있을 때 화면을 띄워줌
<form name="test" autocomplete="off">...</form>
  • 기본 속성 값은 on 이므로, 꺼줄 때 사용하면 되겠다.

폼 요소에 사용하는 태그들

1. <fieldset>

  • 하나의 폼 안에서 여러 구역을 나누어 표시할 때 사용
  • 예를 들어 쇼핑몰에서 개인 정보 및 배송 정보를 fieldset으로 나눠 표시하면, 깔끔하게 화면 정리가 가능
<fieldset [속성="속성 값"]>...내용<fieldset>

2. <legend>

  • fieldset으로 묶은 그룹에 대해, 제목을 지을 수 있는 태그
<fieldset>
	<legend>그룹 이름</legend>
</fieldset>

3. <label>

  • input 태그와 같은 폼 요소에 레이블(라벨)을 붙일 때 사용
  • 이때 라벨은, 입력칸에 붙여놓은 제목 텍스트 같은 것 (아래 사진과 같이)

  • 이름 / 생년월일 / 은행 / 계좌번호 등이 label 태그

추가 - for - id 속성을 이용하여 따로쓴 input 태그(폼 요소) 와 라벨 연결하기

<label for="test">아이디</label>
<input type="text" id="test">
  • for - id를 맞춰 줌으로써, 연결 가능

<input> 태그

  • 아이디 입력이나, 로그인 버튼 등 사용자가 직접 입력해야하는 부분에 사용하는 태그
  • 웹 폼의 다양한 곳에서 사용

<input> 태그의 type 속성

  • type 속성을 통해 입력 형태를 다양하게 생성 가능
종류 설명
text 한 줄 짜리 텍스트를 입력하는 박스
password 비밀번호 입력
search 검색할 때 입력하는 필드
url url 주소 입력 필드
email email 입력 필드
tel 전화번호 입력 필드
checkbox 다중 선택을 사용할 때 넣는 속성
radio 단일 선택을 사용할 때 넣는 속성
number 숫자를 조절할 수 있는 스핀 박스
range 숫자를 조절할 수 있는 슬라이드 박스
date 사용자 지역 기준의 날짜 삽입(연, 월, 일)
month 사용자 지역 기준의 날짜 삽입(연, 월)
week 사용자 지역 기준의 날짜 삽입(연, 주)
time 사용자 지역 기준의 시간을 삽입(시, 분, 초, 분할 초)
datetime 국제 표준시(UTC)로 설정된 날짜와 시간을 삽입(연, 월, 일, 시, 분, 분할 초)
datetime-local 사용자 지역 기준의 날짜와 시간을 삽입(연, 월, 일, 시, 분, 분할 초)
submit 전송 버튼 삽입
reset 리셋 버튼 삽입
image 전송 버튼 대신 사용할 이미지 삽입
button 일반 버튼 삽입
file 파일을 첨부할 수 있는 버튼 삽입
hidden 사용자에게는 보이지 않으나, 서버로 넘겨주는 값이 있는 필드 생성

1. text, password

  • 폼에서 가장 많이 사용하는 속성
  • password 속성은 텍스트를 * 나 ● 으로 변환해서 보여줌
  • text와 password에서 주로 사용하는 속성은 다음과 같음
종류 설명
size 텍스트와 비밀번호의 길이 지정(화면에 몇글자나 보이게 할 것인가)
예시로, 5를 설정한다면 10글자 입력 시 5글자만 보이고, 5글자는 화면에는 표시가 되지 않음
value 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용, 사용하지 않으면 빈칸이 표시
password 필드에서는 사용하지 않음
maxlength 최대 문자 수를 지정

2. search, url, email, tel

  • 텍스트 필드를 더 세분해야 될 때, 주로 사용하는 속성들
  • JavaScript의 확인 없이, 웹 브라우저가 알아서 확인한 다음, 유효성을 검사함
    출처 - https://devjhs.tistory.com/561

3. checkbox, radio

  • 다중 선택이냐, 단일 선택이냐에 따라 알맞게 사용하면 됨
  • 사용할 수 있는 속성은 다음과 같음
종류 설명
value 체크 박스나 라디오 버튼을 서버에게 알려줄 때, 넘겨줄 값 지정, 영문(한글)이거나 숫자여야함, 필수 속성
checked 초기에 미선택일 경우, 기본으로 선택해 놓을 항목에 적용하는 속성 
<label><input type="checkbox" value="...">1번></label>
<label><input type="checkbox" value="..." checked>2번></label>
<label><input type="checkbox" value="...">3번></label>

4. number, range

  • 텍스트 필드에 숫자를 입력하기 위해 사용하는 속성들
  • range 속성은 입력이 아닌 슬라이드로 조정할 수 있음 (위 아래)
  • 사용할 수 있는 속성은 다음과 같음
종류 설명
min 필드 입력 최솟값 지정, 기본 값 0
max 필드 입력 최댓값 지정, 기본 값 100
step 숫자 간격을 지정, 기본 값 1
value 필드에 표시할 초기값

5. date, month, week

  • 달력을 넣을 때 주로 사용하며, 무슨 형식으로 보여줄 것인가에 따라 사용
  • 기본적인 달력은 date 속성을 이용하면 됨

6. time, datetime, datetime-local

  • 시간 지정에 사용, 
  • time은 시간만 지정, datetime, datetime-local은 날짜와 시간을 함께 표시

  • 범위는 number, range제한한 것과 같이 min, max, step 등으로 제어가 가능

7. submit, reset

  • submit을 통해 폼에 입력한 정보를 서버로 전송할 수 있음
  • reset을 통해 입력한 폼을 초기화할 수 있음
<input type="submit" value="제출하기"/>
<input type="reset" value="초기화하기"/>

8. image

  • submit과 같은 기능을 하는 이미지 버튼을 나타냄
  • 경로를 지정하면 이미지가 표시되며, 이 때 submit과 같은 동작을 수행

9. button

  • 기본 버튼의 역할을 수행, submit과 reset과 같은 기능은 없음
  • onclick 이벤트를 통해 JavaScript함수나 파일을 삽입하여 동작 가능
<input type="button" value="..." onclick="window.open('연결 주소,파일')>

10. file

  • 파일 첨부시 사용하는 속성
  • 파일 선택이라는 버튼이 생성되며, 클릭시 파일 첨부가 가능

  • 이미지를 보이게하기 위해선 다른 type 속성들을 이용하면 된다

11. hidden

  • 히든 필드 생성에 사용
  • 화면의 폼에 보이지 않으나, 사용자가 입력 완료시 폼과 함께 서버로 전송됨
  • 쇼핑몰에서 사용자의 현재 포인트 등...
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html 연습하기</title>
</head>
<body>
    <h1>히든히든</h1>
    <input type="text" value="이건 보일거고">
    <input type="hidden" value="이건 안보일거고">
</body>
</html>

  • 화면 상에서는 보이지 않는 것을 확인

  • 그러나 개발자 모드로 들어가면, hidden 항목이 보이는 것을 확인할 수 있음

<input> 태그의 주요 속성

1. autofocus

  • 자동으로 입력 커서를 갖다 놓는 속성
  • 화면에 들어가자마자 input에 커서가 있어 바로 입력이 가능함

2. placeholder

  • 입력에 힌트를 주는 속성으로, 값이 입력되지 않았을 때 사용자에게 보여줄 말을 희미하게 표시해주는 속성
  • 아이디를 입력하세요, 비밀번호를 입력하세요 등이 대표적이고, 값 입력시 사라짐

3. readonly

  • 읽기 전용 필드로 만들어주는 속성
  • 사용자는 값 입력을 하지 못함

4. required

  • 필수 입력 필드를 지정할 때 사용
  • 사용자는 이 부분을 입력하지 않으면 폼 제출을 할 수 없음

<form> 에서 사용하는 여러가지 태그

1. <textarea>

  • 텍스트 필드와 다르게 여러줄을 입력할 수 있는 필드를 생성
  • 사용자 약관 등 긴 문장을 사용자에게 보여줄 때 사용
<textarea cols="40" rows="6"></textarea>
  • cols, rows 속성을 통해 열, 행의 크기를 정할 수 있음

2. <select>, <option>

  • 드롭 다운 목록을 생성
  • 사용자가 직접 내용을 입력하는 것이 아닌, 홈페이지에서 정해준 여러 옵션중에서 하나 선택
  • select 태그로 드롭다운의 시작과 끝을, 그 안에 option을 추가하여 내용을 표시
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html 연습하기</title>
</head>
<body>
    <h1>드롭다운</h1>
    <select>
        <option value="값1">내용 1</option>
        <option value="값2">내용 2</option>
        <option value="값3">내용 3</option>
        <option value="값4">내용 4</option>
        <option value="값5">내용 5</option>
    </select>
</body>
</html>

<select> 태그의 속성

종류 설명
size 화면에 표시할 드롭다운 항목 개수 지정
multiple 드롭다운 목록에서 둘 이상의 항목을 선택할 때 사용

<option> 태그의 속성

종류 설명
value 서버에 넘겨줄 값을 지정
selected 드롭다운 메뉴 삽입시, 기본적으로 선택할 옵션을 지정

3. <datalist>, <option>

  • 데이터 목록을 만들 때 사용하는 태그
  • datalist를 사용해 시작과 끝을, option을 사용해 값을 넣어줌
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html 연습하기</title>
</head>
<body>
    <h1>데이터 리스트</h1>
    <select>
        <option value="값1">사용</option>
        <option value="값2">사용 안함</option>
    </select>
</body>
</html>

4. <button>

  • 버튼을 생성할때 사용하는 태그
  • type을 submit, reset, button 중 결정할 수 있으며, 미선택시 submit 적용
  • 각각 input type에서 submit, reset, button 역할과 똑같음
  • CSS를 활용해 원하는 형태로 꾸미기가 가능하기 때문에, 디자인 작업이 필요할 때 사용하면 됨
저작자표시 비영리 동일조건