728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<title>입력값</title>
<meta charset="UTF-8">
</head>
<body>
<!-- <input autofocus maxlength="5" placeholder="검색어 입력" value="Hello">
<input type="number" max="10" min="5">
<input type="text">
<input type="tel">
<input type="email">
<input type="password" placeholder="비밀번호 입력"><br>
<input type="checkbox"><br>
<input name="telecom" type="radio">skt<br>
<input name="telecom" type="radio">kt<br>
<input name="telecom" type="radio">lg -->
<!-- INPUT 태그 : 사용자로 부터 값을 입력 받기 위해 사용 -->
<!-- 속성 :
autofocus : 속성 값을 부여하지 않음. 페이지가 로드되었을때 자동으로 포커스를 준다.
maxlength : 사용자 입력값이 있을 때, 최대 길이.
max : type 속성 값이 'number'일 때, 최댓값.
min : type 속성 값이 'number'일 때, 최소값.
name : 서버로 하여금 해당 INPUT 값을 식별 할 수 있게 하기 위해 존재.
placeholder : 속성 값이 비어있을 때 표시할 도움말.
value : 해당 INPUT 의 값
type : 해당 INPUT의 종류
text : 일반 텍스트(기본값)
email : 이메일 (모바일에서 패드에 골뱅이 생성)
tel : 핸드폰번호 작성( 모바일에서 숫자패드가 기본적용)
password : 비밀번호
checkbox : 체크박스(여/부)
radio : name이 같은 INPUT들 중 하나만 선택할 수 있게 함.
submit : 해당 submit 버튼이 있는 form을 전송한다.( 텍스트는 value로) FORM 태그 안에 있을 때만 해당
reset : 해당 reset 버튼이 있는 form의 input을 초기화한다.( 텍스트는 value로)
bytton : 그냥 버튼( 텍스트는 value로)
-->
<form>
<label>
<!-- LABER 태그 : 하나의 INPUT을 설명과 함께 감싸는 역할. 시각 장애인 등 접근성을 위한 조치. -->
<a hidden>이메일</a>
<!-- hidden 속성 : 태그를 보이지 않게 한다. 속성 값 없음. -->
<input maxlength="50" name="email" placeholder="이메일" type="email">
</label>
<br>
<label>
<a hidden>비밀번호</a>
<input maxlength="50" name="password" placeholder="비밀번호" type="password">
</label>
<br>
<label>
<input nema="autosign" type="checkbox">
<a>자동 로그인</a>
</label>
<br>
<input type="submit" value="로그인">
<!-- FORM 태그 : 서로 관련이 있는 INPUT 태그들을 한번에 담기 위해 사용. 가령, 회원가입, FORM, 로그인 FORM 등.. -->
<select name="drop">
<option VALUE="1" selected>KT</option>
<option VALUE="2">SKT</option>
<option VALUE="3">LGU+</option>
<!-- SELECT 태그 : 역할은 TYPE이 RADIO인 INPUT과 비슷. 드롭다운. -->
<!-- OPTION 태그 : SELECT태그 자식, 선택할 수 있는 항목 -->
<!-- VALUE 속성 : 실제로 서버로 전송될 값 -->
<!-- CHECKED 속성 : 해당 INPUT이 체크된 상태로 시작.//라디오옵션에 적용 -->
<!-- VALUE 속성 : 실제로 서버로 전송될 값//라디오옵션에 적용 -->
</select>
<select>
<optgroup label="대구광역시">
<!-- OPTGROUP : OPTION 태그를 담기 위해 존재. 실질적으로 아무런 역할도 없음. -->
<option>북구</option>
<option>동구</option>
<option>수성구</option>
<option>달서구</option>
</optgroup>
<optgroup label="서울특별시">
<option>서초구</option>
<option>강남구</option>
<option>송파구</option>
<option>강동구</option>
</optgroup>
</select>
</form>
</body>
</html>
728x90
반응형