Input
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input01.html</title>
</head>
<body>
<!--
input 태그의 기본 속성
- type, name, value
type 속성의 값에 따라 input 태그의 형태가 달라짐
-->
<input type="text" />
<!-- 1. text & password 속성값 -->
<hr />
<label>
아이디
<input type="text" size="16" maxlength="5" placeholder="아이디를 입력해주세요." />
</label>
<br />
<label>
비밀번호
<input type="password" />
</label>
<!-- 2. email 속성값 -->
<br />
<form>
<label>
이메일
<input type="email" />
</label>
<button type="submit">전송 버튼</button>
</form>
<!-- 3. radio와 checkbox 속성값 -->
<br />
<h3>가장 좋아하는 KBO 프로야구 팀은?</h3>
<label>
<input type="checkbox" value="롯데" checked />롯데 자이언츠
</label>
<label>
<input type="checkbox" value="기아" />기아 타이거즈
</label>
<label>
<input type="checkbox" value="LG" checked />LG 트윈스
</label>
<label>
<input type="checkbox" value="한화" />한화 이글스
</label>
<h3>성별이 무엇입니까?</h3>
<label>
남 <input type="radio" name="gender" checked />
</label>
<label>
여 <input type="radio" name="gender" />
</label>
<label>
모름 <input type="radio" name="gender" />
</label>
<br />
<h3>이벤트 메시지 수신 동의</h3>
<label>
동의함 <input type="radio" name="agree" checked />
</label>
<label>
동의 안 함 <input type="radio" name="agree" />
</label>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input02.html</title>
</head>
<body>
<!-- 1. submit & reset 속성값 -->
<h2>롯데 자이언츠 유니폼 주문하기</h2>
<form>
<label>
상품명
<input type="text" />
</label>
<br />
<label>
수량
<input type="text" />
</label>
<br />
<label>
배송 날짜 지정
<input type="date" />
</label>
<br />
<label>
배송 확인 메시지 전송 이메일
<input type="email" />
</label>
<hr />
<input type="submit" value="주문하기" />
<input type="reset" value="취소하기" />
</form>
<!-- 2. number & range 속성값 -->
<!-- number 속성값: 스핀박스를 활용하여 숫자를 선택 -->
<input type="number" min="0" max="10" step="2" />
<!-- range 속성값의 기본값: 0 ~ 100 -->
<input type="range" value="50" />
<!-- 3. button 속성값 -->
<input type="button" value="버튼에 표시할 내용" />
<!-- 4. file 속성값 -->
<input type="file" />
<!-- 5. hidden 속성값 -->
<input type="hidden" />
<input type="hidden" name="user-count" value="1" />
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input_att.html</title>
</head>
<body>
<!--
bool 속성: boolean
>> 작성 시 해당 속성의 값은 true로 지정된 것과 같다.
>> 작성하지 않으면 기본값 false로 지정된 것과 같다.
-->
<form>
<label for="name">이름</label>
<input
type="text"
id="name"
autofocus
placeholder="이름을 입력해주세요."
value="홍길동"
readonly
required
/>
<br />
<label for="id">아이디</label>
<input
type="text"
id="id"
autofocus
placeholder="아이디를 입력해주세요."
required
/>
<br />
<label for="password">비밀번호</label>
<input
type="password"
id="password"
placeholder="비밀번호를 입력하세요."
required
/>
<br />
<label for="email">이메일</label>
<input type="email" id="email" placeholder="이메일을 입력하세요" />
<br />
<input type="submit" />
</form>
</body>
</html>'HTML' 카테고리의 다른 글
| HTML 기본 활용 예시3( HyperLink) (0) | 2024.07.26 |
|---|---|
| HTML 기본 활용 예시1(div, form태그) (0) | 2024.07.26 |