HTML) input 태그 & select 태그 & textarea 태그 주요 타입 및 속성 이해

HTML) 주요 태그 모음 & 코드 예제

**위 링크를 통해서 html 주요 태그 확인하기!!**

1. input 태그

타입	설명
text	한 줄 텍스트 입력
number	숫자 입력
date	날짜 입력
color	색상 선택
range	슬라이더 형태 입력
button	버튼 생성
radio	단일 선택 버튼
checkBox	체크 박스 버튼 생성

 

1. text 타입

text입력: <input type="text" value="" placeholder="이름"/>

 

2. number 타입

number입력: <input type="number" value="5" max="10" min="1"/>

 

3. date 타입

날짜: <input type="date" value="2025-03-01"/>

 

4. color 타입

컬러: <input type="color" value="#ffff00"/>

 

5. range 타입

<input type="range" max="100" min="1"/>

 

6. button 타입

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

: 둘 다 가능하지만 사용 빈도수는 아래 코드인 것 같음.

 

7. radio button 타입

Radio button:<br/> <!-- 동일한 name 설정 시 중복 선택 x -->
<input type="radio" name="car" value="벤츠">벤츠<br/>
<input type="radio" name="car" value="아우디">아우디<br/>
<input type="radio" name="car" value="BMW">BMW<br/>

 

8. checkBox 타입

CheckBox:<br/>
<input type="checkbox" value="music">음악<br/>
<input type="checkbox" value="picture">그림<br/>
<input type="checkbox" value="game">게임<br/>

---

2. select 태그

태그	설명
<select>	드롭다운 리스트 생성
<option>	선택 가능한 항목 정의
selected	기본 선택 옵션 설정
multiple	여러 개 선택 가능
disabled	선택 비활성화
<optgroup>	옵션을 그룹화

 

1. value 속성 (전송될 실제 데이터)

Select:
<select>
    <option value="apple">사과</option>
    <option value="pear">배</option>
    <option value="grape">포도</option>
</select>

<select>: 드롭다운 리스트를 정의하는 태그

<option>: 선택 가능한 항목(옵션)

: 사용자는 사과, 배, 포도로 보이지만,

: 서버로 전송되는 값은 "apple", "pear", "grape"

 

2. name 속성 (서버로 데이터 전송)

Select:
<select name="fruit">
  <option value="apple">사과</option>
  <option value="banana">바나나</option>
  <option value="grape">포도</option>
</select>

: name="fruit" → 사용자가 선택한 값이 fruit라는 이름으로 서버에 전송됨

: 선택된 값이 "banana"라면 → fruit=banana 로 서버에 전달됨

 

3. selected 속성 (기본 선택 옵션 설정)

Select:
<select>
    <option value="apple">사과</option>
    <option value="pear">배</option>
    <option value="grape" selected="selected">포도</option>
</select>

: selected가 있는 "포도"가 기본 선택됨

 

4. multiple 속성 (다중 선택 가능)

<select name="hobby" multiple size="4">
  <option value="reading">독서</option>
  <option value="sports">운동</option>
  <option value="music">음악</option>
  <option value="travel">여행</option>
</select>

: multiple을 추가하면 여러 개 선택 가능 (Ctrl 또는 Shift 키 사용)

: size="4" → 4개의 옵션이 동시에 보임 (스크롤 가능)

 

5. disabled 속성 (비활성화)

Select:
<select disabled>
  <option>선택할 수 없음</option>
</select>

: 드롭다운이 비활성화되어 선택할 수 없음

 

6. <optgroup> (옵션 그룹)

Select:
<select>
  <optgroup label="과일">
    <option value="apple">사과</option>
    <option value="banana">바나나</option>
  </optgroup>
  <optgroup label="채소">
    <option value="carrot">당근</option>
    <option value="cucumber">오이</option>
  </optgroup>
</select>

: 옵션을 그룹으로 묶어서 보기 좋게 정리할 수 있음

: 과일 그룹과 채소 그룹으로 나뉘어 표시됨

 

form 활용 제출 예제

Select:
<form action="submit.jsp" method="post">
  <label for="language">선호하는 언어:</label>
  <select name="language" id="language">
    <option value="ko">한국어</option>
    <option value="en">영어</option>
    <option value="jp">일본어</option>
  </select>
  <input type="submit" value="제출">
</form>

: 선택한 언어가 submit.jsp 로 전송됨

: 예를 들어 "영어"를 선택하면 → language=en 이 전송됨

---

3. textarea 태그

태그	설명
<textarea>	여러 줄 텍스트 입력 필드 생성
rows	세로 크기(줄 개수) 지정
cols	가로 크기(글자 수) 지정
placeholder	입력창 힌트(예시 텍스트)
maxlength	최대 글자 수 제한
wrap	줄바꿈 방식 설정
readonly	읽기 전용 (수정 불가능)
disabled	입력 불가능 (비활성화)
required	필수 입력 설정

 

1. rows & cols (입력창 크기 조절)

<textarea rows="5" cols="30"></textarea>

: 실제론 CSS에서 조절하는 게 더 유용함

 

2. placeholder (힌트 텍스트)

<textarea rows="10" cols="60" placeholder="자기소개"></textarea>

: 입력 전, 연한 회색 글씨로 안내 문구 표시됨

: 사용자가 입력하면 사라짐

 

3. maxlength (최대 글자 수 제한)

<textarea maxlength="100"></textarea>

: 100글자까지만 입력 가능

 

4. wrap (자동 줄바꿈 설정)

<textarea wrap="hard"></textarea>

: wrap="soft" (기본값) → 줄바꿈 없이 한 줄로 입력 가능

: wrap="hard" → 지정한 너비를 넘어가면 자동 줄바꿈

: 아래 그림을 통해 설명하자면 글자 수가 박스 칸보다 길어지면,

: 줄바꿈을 하냐 안하냐의 차이

 

5. readonly (읽기 전용)

<textarea readonly>이 내용은 수정할 수 없습니다.</textarea>

: 사용자가 수정할 수 없음

: 복사만 가능

 

6. disabled (비활성화)

<textarea disabled>입력할 수 없습니다.</textarea>

: 클릭도 안 되고, 입력도 불가능

 

7. required (필수 입력)

<form>
  <textarea name="comment" required></textarea>
  <input type="submit" value="제출">
</form>

: 사용자가 아무것도 입력하지 않으면 폼 제출이 안 됨

 

폼과 함께 활용 예제

<form action="submit.jsp" method="post">
  <label for="message">메시지를 입력하세요:</label><br/>
  <textarea id="message" name="message" rows="4" cols="50" 
  placeholder="내용을 입력하세요..." required></textarea>
  <br/>
  <input type="submit" value="전송">
</form>

: 사용자가 입력한 텍스트가 "message"라는 이름으로 서버에 전송됨

: 필수 입력 (required) 적용됨

: 입력하지 않고 전송 시 아래 그림처럼 문구 나옴

: "이 입력란을 작성하세요." 문구는 <textarea required> 속성 기본 반환값(변경 가능)

 

required 문구 커스텀 메시지로 변경하는 방법

: 브라우저 기본 메시지가 아닌 사용자 지정 메시지를 띄우려면 oninvalid + setCustomValidity() 사용

<form action="submit.jsp" method="post">
  <label for="message">메시지를 입력하세요:</label><br/>
  <textarea id="message" name="message" rows="4" cols="50" placeholder="내용을 입력하세요"
    required oninvalid="this.setCustomValidity('메시지를 입력해야 합니다!')"
    oninput="this.setCustomValidity('')"></textarea>
  <br/>
  <input type="submit" value="전송">
</form>

oninvalid: 유효성 검사에 실패하면 커스텀 메시지 표시

oninput: 사용자가 입력하면 기본 메시지로 초기화 = 사용자가 입력을 시작하면 오류 메시지를 지워서 정상 입력 상태로 변경

: 이렇게 하면 "이 입력란을 작성하세요." 대신 "메시지를 입력해야 합니다!" 가 표시된다.