1. <input>
① type 속성
② name 속성
③ value 속성
2. <select>
3. <textarea>
1. <input>
<input> 요소란 사용자로부터 값을 입력받을 수 있는 입력창을 만드는 요소이다.
해당 요소는 기본적으로 인라인 블록을 만드는 인라인 요소이며, 별도의 닫는 태그가 없는 단일 태그이다.
<input> 요소는 'type' 속성의 값에 따라 입력 요소의 형태를 다르게 할 수 있으며
추가적으로 'name' 속성을 통해서 각 입력 요소에 대해 식별자를 추가할 수 있다.
① type 속성
type 속성은 <input> 요소의 핵심적인 속성으로 해당 속성의 값에 따라 입력창의 형태와
입력할 값의 유형이 달라지고 거기에 맞춰서 추가로 적용할 수 있는 속성의 종류도 조금씩 차이가 생긴다.
해당 속성의 기본 값은 'text'로 아래의 예제를 보면 '이름' Part에 별도로 type을 지정하지 않았기에
입력 창이 기본 값인 'text'를 입력받는 형태로 생성된 것을 확인할 수 있다.
<!-- input 예제 -->
<!-- <input type="입력 유형"/> -->
이름: <input/><br/>
생년월일: <input type="date"/>이름:
생년월일:
② name 속성
<input> 요소, 각 입력 항목에 name 식별자를 부여하는 속성으로
<form>으로 감싼 입력 요소에 입력한 값을 서버에 제출하고
서버에서 해당 데이터를 참조하기 위해서 사용되거나 혹은 Javascript에서 동적인 기능을 추가하기 위해서
입력 요소를 참조해야할 때 사용된다. (<form> 태그에 대해서는 나중에 개별적으로 다루도록 하겠다.)
<!-- input 예제 -->
<!-- <input type="" name="식별자"/> -->
이름: <input type="text" name="username"/><br/>
생년월일: <input type="date" name="userbirth"/><br/>이름:
생년월일:
③ value 속성
value 속성은 <input> 요소의 초깃값, 기본값을 명시하는 속성이다.
해당 속성은 같이 사용한 type 속성의 값에 따라 각기 다른 용도로 사용될 수 있다.
- "button", "reset" 등의 버튼을 만드는 type => 버튼 내의 텍스트를 정의한다.
- "text"와 같은 텍스트 입력창을 만드는 type => 텍스트 입력 창의 기본 값( == value 속성 값)
- "date", "datetime"과 같은 날짜, 시간을 입력하는 type => 날짜 선택 창의 기본 값(== value 속성 값)
<!-- value 속성 예제 -->
이름: <input type="text" value="홍길동"/><br/>
생년월일: <input type="date" value="2022-05-02"/><br/>
<input type="button" value="확인"/> <input type="reset" value="취소"/>이름:
생년월일:
번외. <input> 태그 예제
앞에서 <input> 요소의 정의와 해당 요소에서 사용되는 'type', 'name', 'value' 속성에 대해 알아보았다.
여기서 다루지 않은 type과, <input> 요소에서 사용되는 다른 속성에 대해서는 분량 상 다루지는 못하고
아래의 링크를 통해서 나머지 type과 속성에 대해서 확인할 수 있을 것이다.
input 태그 (MDN-HTML)
그러면 이제 다음 입력 요소로 넘어가기 전에, 예제를 하나 보고가자.
<input> 요소의 type 몇 가지를 보여주는 예제이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Input 태그 예제</title>
</head>
<body>
<h4>Input 요소 예제</h4>
<hr/>
<input type="text" placeholder="텍스트를 입력해주세요." maxlength="20"/><br/>
<!--
placeholder 속성
- type="text"와 같이 문자 입력창을 만드는 입력 요소에
데이터가 입력되지 않았을 때 나오는 속성
- 문자 입력 창에 아무것도 입력하지 않았을 때
해당 입력 창에 나오는 안내 메시지와 같은 것을 만든다.
maxlength 속성
- value, 입력 값의 최대 문자수를 지정하는 속성
- 해당 요소에서는 최대 문자수를 20자로 제한했다.
-->
<br/>
<input type="button" value="버튼"><br/>
<br/>
색상을 골라주세요. <input type="color"/><br/><br/>
날짜를 정해주세요. <input type="date" value="2023-05-04"><br/><br/>
<input type="number"/><br/><br/>
<input type="range" min="0" max="10" step="2"/>
<!--
min/max 속성
- 숫자를 입력하는 type의 최소값/최대값을 지정하는 속성
step 속성
- 숫자가 증가하는 범위를 지정한다.
- step="2"로 설정하면, 숫자가 2씩 늘어난다.
-->
</body>
</html>Input 태그 예제 Input 요소 예제
색상을 골라주세요.
날짜를 정해주세요.
2. <select>
<select> 태그는 다수의 선택지를 포함할 수 있는 선택 메뉴를 만드는 입력 요소이다.
이때 선택지의 항목은 '<option>' 요소로 표시하고, 'name' 속성을 통해서 name 식별자를 추가할 수 있다.
그리고 각 <option> 요소에 value 속성을 통해서 서버로 데이터를 전송할 때 실제 처리될 값을 정할 수 있다.
<!-- select 요소 예제 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select 태그 예제</title>
</head>
<body>
<h4>카페 메뉴 고르기</h4>
<select name="CafeMenu">
<option value="Espresso">에스프레소</option>
<option value="Caffe Americano">아메리카노</option>
<option value="Cappuccino">카푸치노</option>
<option value="Caffe Latte">카페라떼</option>
<option value="Caffe Mocha">카페모카</option>
<option value="Caramel Macchiato">카라멜 마끼아또</option>
</select>
</body>
</html>select 태그 예제 카페 메뉴 고르기
<select> 요소에 대한 기본적인 설명은 여기서 마치고 다음 내용으로 넘어가기 전에
알아두면 유용할 size, multiple, disabled, selected 속성에 대해 알아보자.
| 속성 명 | 설명 | |||||||
| size | 한 번에 보일 선택지의 개수를 지정하는 속성 | |||||||
| multiple | 선택지를 여러 개 고를 수 있게하는 속성 (boolean 속성) | |||||||
| disabled | 선택지를 비활성화해서 선택을 못하게하는 속성 (boolean 속성) | |||||||
| selected | 해당 속성이 적용된 선택지가 기본적으로 선택된 상태로 있게하는 속성 (option 태그 사용) | |||||||
해당 속성들이 어떤 역할을 하는 지 알았으니 이제 예제를 통해서 감을 잡아보자.
<!-- select 요소 예제 2 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>select 태그 예제</title>
</head>
<body>
<h4>카페 메뉴 고르기</h4>
<select name="Coffee" multiple size="4">
<!--
mutiple 속성을 적용했기 때문에
선택지를 여러 개 고를 수 있으며
size 속성 값이 4지만 선택지의 개수가 더 많기 때문에
나머지 속성은 스크롤을 해서 확인할 수 있다.
-->
<option value="Espresso">에스프레소</option>
<option value="Caffe Americano" selected>아메리카노</option>
<option value="Cappuccino">카푸치노</option>
<option value="Caffe Latte" selected>카페라떼</option>
<option value="Caffe Mocha">카페모카</option>
<option value="Caramel Macchiato">카라멜 마끼아또</option>
<!--
아메리카노, 카페라떼에 selected 속성을 적용했기 때문에
기본적으로 이 두개의 메뉴가 선택된 상태이다.
즉, 초기값을 아메리카노, 카페라떼로 설정한 것이다.
-->
</select>
<hr/>
<h4>공학대학 학과 고르기</h4>
<p>disabled 속성이 적용됐기 때문에 선택지를 고를 수 없다.</p>
<select name="EngineeringStudys" size="5" disabled>
<option value="MechanicalEngineering">기계공학</option>
<option value="Electronics">전자공학</option>
<option value="ElectricalEngineering">전기공학</option>
<option value="ComputerScience">컴퓨터공학</option>
<option value="Architecture">건축학</option>
</select>
<hr/>
<h4>선호하는 날씨 고르기</h4>
<select name="weather" size="4">
<option value="spring">봄</option>
<option value="summer">여름</option>
<option value="fall" selected>가을</option>
<option value="winter" selected>겨울</option>
<!--
해당 요소는 mutiple 속성을 명시하지 않았기 때문에
선택지, option 요소에 selected 속성이 하나만 적용되는 것을 확인 가능
-->
</select>
</body>
</html>select 태그 예제 카페 메뉴 고르기
공학대학 학과 고르기
disabled 속성이 적용됐기 때문에 선택지를 고를 수 없다.
선호하는 날씨 고르기
3. <textarea>
<textarea> 태그는 여러 줄의 텍스트를 입력할 수 있는 입력창을 만드는 요소이다.
해당 요소도 <input>, <select>와 같은 다른 입력요소와 마찬가지로
'name' 속성을 통해서 name 식별자를 추가하는 것이 가능하다.
그리고 <textarea> 요소의 크기를 'cols'와 'rows' 속성을 통해 임의로 지정할 수 있다.
(cols => 행 크기 지정 / rows => 열 크기 지정)
(CSS에서 height, width 속성으로도 해당 요소의 크기를 지정할 수 있다.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>textarea 태그 예제</title>
</head>
<body>
<h4>textarea 태그 예제</h4>
<p>textarea 태그 예제입니다.</p>
<textarea name="sample" cols="30" rows="10"></textarea>
</body>
</html>textarea 태그 예제 textarea 태그 예제
textarea 태그 예제입니다.
2023-05-05 19:15 본문 작성 완료
2023-05-06 01:02 목차-본문 링크 추가
'Frontend > HTML' 카테고리의 다른 글
| [HTML] <form> 태그 (0) | 2023.05.14 |
|---|---|
| [HTML] 시맨틱 태그 (Semantic Tag) (0) | 2023.04.27 |
| [HTML] 목록 만들기 (<ul>, <ol>, <li>) (0) | 2023.04.01 |
| [HTML] <a> 요소 (0) | 2023.03.29 |
| [HTML] <img> 태그 (0) | 2023.03.19 |
