반응형
안녕하세요. HTML강사 코딩하는 고양이입니다.
오늘은 input 태그를 배워볼 거예요.
시작하기 전에 초기 설정을 해주세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
</body>
</html>이것을 복사하세요.
1. input 태그란
input는 입력태그 중 하나입니다.
input에는 type가 엄청 많습니다.
| input type= | button | 버튼 |
| checkbox | 체크박스 | |
| date | 연 월 일 | |
|
datetime-local
|
연 월 일 시 분 | |
| 이메일 입력창 | ||
| file | 파일 선택 | |
| hidden | 숨기기 | |
| month | 연 월 | |
| number | 숫자 | |
| password | 비밀번호 입력창 | |
| radio | 라디오 버튼 | |
| range | 스크롤바 | |
| reset | 초기화 버튼 | |
| search | 검색창 | |
| submit | 제출 버튼 | |
| tel | 전화번호 입력창 | |
| text | 텍스트 | |
| time | 시 분 | |
| url | 링크 입력창 | |
| week | 연 주 | |
사실 이것보다 더 많지만 너무 많으니 하나씩 알아보겠습니다.
2. button
버튼은 그저 일반 버튼입니다.
형태는 <input type="button" 속성>입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<input type="button">
</body>
</html>결과
버튼의 속성은
value와 onclick이 있습니다.
value는 버튼에 표시될 이름이고
onclick은 실행할 코드입니다.
이 코드가 javascript코드를 적는 것인데
javascript는 나중에 하겠습니다.
예)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<input type="button" value="하이">
<input type="button" value="이하" onclick="alert('어쩌라고')">
</body>
</html>결과
3. checkbox와 radio
checkbox와 radio 모두 체크박스입니다.
하지만 checkbox는 체크를 취소할 수 있지만
radio는 체크하면 취소할수 없습니다.
예)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<input type="checkbox">
<input type="radio">
</body>
</html>결과
4. 날짜
date, datetime-local, month, time, week 가 날짜 속성입니다.
date는 연 월 일
datetime-local은 연 월 일 시 분
month는 연 월
time은 시 분
week는 연 주
입니다.
예)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<input type="date">
<input type="datetime-local">
<input type="month">
<input type="time">
<input type="week">
</body>
</html>
결과
5. 텍스트
email, password, search, tel, text, url은 텍스트 입력 속성입니다.
email은 이메일
password는 비밀번호
search는 검색창
tel은 전화번호
text는 텍스트
url은 링크 입력창입니다.
예)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<input type="email"><br>
<input type="password"><br>
<input type="search"><br>
<input type="tel"><br>
<input type="text"><br>
<input type="url"><br>
</body>
</html>결과
text와 password는 입력 가능한 글자수와
화면에 출력할 글자수를 정할 수 있습니다.
size는 화면에 출력할 글자수이고
maxlength는 입력 가능한 글자수입니다.
예)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<input type="password"><br>
<input type="text"><br>
<input type="password" size="10"><br>
<input type="text" maxlength="12">
</body>
</html>
결과
6. reset과 submit
reset은 초기화 버튼이고
submit는 제출 버튼입니다.
예)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<input type="reset">
<input type="submit">
</body>
</html>결과
7. number과 range
예)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<input type="number">
<input type="range">
</body>
</html>결과
이 두 속성은 최솟값과 최댓값을 설정할수 있습니다.
max는 최대값
min은 최솟값입니다.
예)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<input type="number" max="100" min="1">
<input type="range" max="50" min="10">
</body>
</html>결과
오늘의 문제!
1번 문제
아래 사진처럼 만드세요. (단 최솟값은 1, 최댓값은 10으로 한다.)
2번 문제
아래 사진처럼 만드세요.
1번 답
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
display: inline;
}
</style>
</head>
<body>
<p>1</p>
<input type="range" max="10" min="1">
<p>10</p>
</body>
</html>2번 답
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<h1>밸런스 게임 1</h1>
<input type="button" value="1. 100km 걸어가기">
<input type="button" value="2. 1km 수영하기">
</body>
</html>
오늘은 여기까지 ㅂㅂ
반응형
'HTML, CSS > 이론' 카테고리의 다른 글
| [HTML/CSS] 8. CSS 선택자 (0) | 2023.03.26 |
|---|---|
| [HTML/CSS] 7. 기타 CSS 속성 (0) | 2023.03.25 |
| [HTML/CSS] 6. CSS의 필수 속성 (1) | 2023.03.24 |
| [HTML/CSS] 5. 표 태그 (0) | 2023.03.23 |
| [HTML/CSS] 4. CSS의 기초 (1) | 2023.03.22 |