프론트엔드/html
[유노코딩 html 11강] input 태그 배우기
응개야
2023. 8. 2. 13:17
input 태그는 입력 요소를 만드는 태그이다.
input 태그는 type 속성을 통해 형태와 입력 값 유형을 결정한다.
name은 id나 class처럼 커스텀해주는 기능임.
서버프로그램이나 js에서 유용함 식별을 해주기 위한 기능.이라고 생각하면 될 것 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>다양한 입력 요소 만들기</title>
</head>
<body>
<h1>인풋을 알아보자</h1>
<input name="text" type="text" placeholder="메시지 입력"/> <br> <br>
<input name="push" type="button" value="PUSH"/> <br> <br>
<input name="color" type="color"/> 색을 골라보세요! <br> <br>
<input name="score" type="range" max="100:" min="0" step="10"/> <br> <br>
<input type="date"/> <br> <br>
<input type="text" name="nickname"/>
<input type="text" name="job"/>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>12강 input외에 select 그리고 textarea</title>
</head>
<body>
<h1> 선호하는 커피숍 고르기 </h1>
<br>
<select name="cafe"
rows="20" cols="30">
<option value="starbucks"> <selected>스타벅스</selected></option>
<option value="paulbasset">폴바셋</option>
<option value="megacoffee">메가커피</object>
<option value="composecoffee">컴포즈커피</option>
</select>
<br>
<textarea name="content"
rows="10" cols="10">맛집은 회전율이 높은 카페일 가능성이 높습니다.</textarea>
</textarea>
</body>
</html>