반응형
input 태그
<input />
사용자로부터 값을 입력받을 수 있는 입력창을 말함.
인라인 요소, 단일 태그
input의 type 속성
input의 type 속성에 따라 입력 요소의 형태, 유형이 달라짐.
input의 기본 type 속성은 텍스트임
<!DOCTYPE html>
<head>
<meta charset = "utf-8">
<title> 다양한 입력 요소 만들기 </title>
<head>
<body>
<input type = "text" /> <br> <br>
<input type = "color" /> <br> <br>
<input type = "button" /> <br> <br>
<input type = "date" /> <br> <br>
<input type = "range" /> <br> <br>
<body>
<html>
각 입력 요소마다 속성을 추가할 수 있다.
<!DOCTYPE html>
<head>
<meta charset = "utf-8">
<title> 다양한 입력 요소 만들기 </title>
<head>
<body>
<!-- 텍스트 입력 창에 "메세지를 입력하세요라는 문구를 넣고, 입력 최대 갯수를 5자로 제한하였다-->
<input type = "text" placeholder="메시지를 입력하세요" maxlength ="5" /> <br> <br>
<input type = "color" / > <br> <br>
<!-- button에 "버튼"이라는 표시를 하였다.-->
<input type = "button" value="버튼"/> <br> <br>
<input type = "date" /> <br> <br>
<!-- range를 0에서 100으로 설정하고 10씩 증가 혹은 감소하도록 설정하였다.-->
<input type = "range" / max="100", min="0" step="10"> <br> <br>
<body>
<html>
name 속성을 이용하여 각각 입력 요소의 이름을 지정하여 서로 식별할 수 있다.
이는 차후 javascript를 통해 각 요소에 기능을 줄 때 유용하게 사용할 수 있다.
<!DOCTYPE html>
<head>
<meta charset = "utf-8">
<title> 다양한 입력 요소 만들기 </title>
<head>
<body>
<!-- 각 입력 요소 마다 name을 지정하여 서로 식별할 수 있게 하였다-->
<input name="text" type = "text" placeholder="메시지를 입력하세요" maxlength ="5"/> <br> <br>
<input name="color" type = "color" / > 색을 고르시오. <br> <br>
<input name="button" type = "button" / value="버튼"> <br> <br>
<input name="date" type = "date" /> <br> <br>
<input name="range" type = "range" / max="100", min="0" step="10"> <br> <br>
<body>
<html>
반응형
'html' 카테고리의 다른 글
| form 태그 (0) | 2022.08.06 |
|---|---|
| select & textarea 태그 (0) | 2022.08.03 |
| 목록 만들기 (0) | 2022.07.31 |
| 링크 만들기 (0) | 2022.07.27 |
| id, class 태그 (0) | 2022.07.25 |
