WEB-HTML-입력하는 input 태그
입력하는 input 태그
입력하는 input 태그
텍스트 나타내는 type=”text”와 비밀번호 나타내는 type=”password”
- 기본형
<input type="text">
<input type="password"> // **** 표시로 보여줌
- 주요 속성
- size : 길이 지정. 화면에 몇 글자 보이게 할지 지정하는 속성
- value : 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용
- maxlength : 최대 문자 수 지정
- 로그인 폼 생성
<body>
<form>
<fieldset>
<label>아이디 :
<input type="text" id = "userid" size="10">
</label>
<label>비밀번호 :
<input type="password" id = "userpwd" size="10">
</label>
<input type="submit" value="로그인"> // 전송 버튼
</fieldset>
</form>
</body>
- 출력 화면
type=”search”, type=”url”, type=”email”, type=”tel”
type = “search” 검색을 위한 텍스트로 인식하여 오른쪽에 x 표시가 나타나 쉽게 지울 수 있다.
type = “url” 웹 주소를 입력하는 필드
type = “email” 이메일 주소를 입력하는 필드
type = “tel” 전화번호를 나타내는 필드
체크 박스 type = “checkbox”, 라디오 버튼 type = “radio”
- 라디오 버튼 : 항목 1개 선택
- 하나의 버튼만 선택할 수 있게 하려면 모든 라디오 버튼의 name 값을 똑같이 지정해줘야 한다.
체크 박스 : 2개 이상의 항목 선택
- 속성
- value : 서버에게 넘겨줄 값으로 필수 속성이며 영문이거나 숫자형이어야만 한다.
- checked : 기본으로 선택해 놓고 싶은 경우에 사용
- 기본형
<input type = "radio">
<input type = "checkbox">
<form>
<fieldset>
<legend>상품 선택</legend>
<p><b>주문할 상품을 선택해 주세요.</b></p>
<label><input type="checkbox" value="s_1">선물용 1</label>
<label><input type="checkbox" value="s_2">선물용 2</label>
<p><b>포장 선택</b></p>
<label><input type="radio" name="gift" value="yes">포장</label>
<label><input type="radio" name="gift" value="no">포장 안 함</label>
</fieldset>
</form>
- 출력 화면
회원가입 폼 만들기
<!DOCTYPE html>
<html lang="en">
<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">
<meta name="author" content="YooJin Lee">
<title>회원 가입 폼 만들기</title>
</head>
<body>
<h1>회원 가입</h1>
<form>
<fieldset>
<legend>사용자 정보</legend>
<ul>
<li>
<label for="uid">아이디</label>
<input type="text" id="uid">
</li>
<li>
<label for="upwd">비밀번호</label>
<input type="password" id="upwd">
</li>
<li>
<label for="upwd1">비밀번호 확인하기</label>
<input type="password" id="upwd1">
</li>
<li>
<label for="umail">이메일</label>
<input type="email" id="umail">
</li>
</ul>
</fieldset>
<fieldset>
<legend>이벤트와 새로운 소식</legend>
<input type="radio" value="yes" name = "mail" id = "mail_yes">
<label for="mail_yes">메일 수신</label>
<input type="radio" value="no" name = "mail" id = "mail_no">
<label for="mail_no">메일 수신 안 함</label>
</fieldset>
<div id = "buttons">
<input type="submit" value = "가입">
<input type="reset" value = "취소">
</div>
</form>
</body>
</html>
- 출력 화면
type 속성을 두는 이유
PC 환경에서는 변화가 없는 것처럼 보이지만 모바일 환경에서 type 속성에 따라 가상 키보드 배열이 바뀌는것을 확인할 수 있다.
출처
- (고경희, ⌜Do it! HTML+CSS+자바스크립트 웹 표준의 정석⌟, 이지스퍼블리싱, 2021)을 학습하고 개인 학습용으로 정리한 내용입니다.
