보충학습 input 속성들 설명
input 태그 :
<!DOCTYPE html>
<html lang="en">
<head>
<title> input 연습</title>
</head>
<body>
<a href="이미지.png">이미지</a>
<form action="결과.html">
<label for="fname">아이디를입력해보자</label>
<input type="text" id="fname">
<label for="pass">password</label>
<input type="password" id="pass"> </form>
<form>
<div><input type="submit"></form></div>
</form>
</body>
</html>
<form label for="label값을 지칭하는 시스템적인 명칭">우리끼리 정의하는 명칭</label>
input 태그는 입력을 받는 폼을 의미하는데, 사용자가 데이터를 입력하는 영역을 결정.
<input type="입력받을폼유형" id="같이 연동할 label값의 시스템이름"> 의미한다.
그런데 input type에도 그 유형들이 다른데,
text : 텍스트입력칸
checkbox : 체크박스
password : 비밀번호
date : 날짜 등이 있다.
-----------------------------------------------
value
<input type="text" id="____ name="____" value="love">
</head>
<p> value 값은 입력칸에 처음 자동 입력값을 의미.</p>
<body>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="love"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="love"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
readonly
<input type="text" id="fname" name="fname" value="John" readonly>
글을 수정 못하고, 읽기전용으로만 설정하는 기능, 단독사용
<body>
readonly 는 글을 수정 못하고, 오직 읽기로만 가능
<form action="/action_page.php">
<label for="fname">First name:</label>
<br>
<input type="text" id="fname" name="fname" value="love" readonly>
<br>
<label for="lname">Last name:</label>
<br>
<input type="text" id="lname" name="lname" value="love">
<br>
<input type="submit" value="Submit">
</form>
disabled
그 입력칸 자체를 입력 수정 못하게 막아버리는 기능
단독사용
<input type="text" id="fname" name="fname" value="love" disabled>
<form action="/action_page.php">
<label for="fname">First name:</label>
<br>
<input type="text" id="fname" name="fname" value="love" disabled>
<br>
<label for="lname">Last name:</label>
<br>
<input type="text" id="lname" name="lname" value="love">
<br>
<input type="submit" value="Submit">
</form>
size
입력칸의 넓이를 결정하는 size
<input type="text" id="fname" name="fname" size="60">
<input type="text" id="pin" name="pin" size="10">
<head>
size는 입력칸의 넓이(문자단위)의 크기이다
</head>
<body>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="60">
<br>
<label for="pin">PIN:</label>
<br>
<input type="text" id="pin" name="pin" size="10">
<br>
<input type="submit" value="Submit">
</form>
</body>
maxlength
문자를 최대 입력할 수 있는 수를 지정
<input type="text" id="fname" name="fname" maxlength="10"
size="10" >
<input type="text" id="pin" name="pin" maxlength="5" size="4">
<body>
<p>maxlength 최대 입력할 수 있는 문자수를 지정하는 값</p>
<form action="/action_page.php">
<label for="fname">First name:</label>
<br>
<input type="text" id="fname" name="fname" maxlength="10"
size="10" >
<br>
<label for="pin">PIN:</label>
<br>
<input type="text" id="pin" name="pin" maxlength="5" size="4">
<br>
<input type="submit" value="Submit">
</form>
</body>
중요한건, 유저에게 입력 제한 수가 있다는 것을 경고하는 피드백 기능은 없으므로 별도로 자바스크립트를 이용해서 추가로 피드백 기능을 만들어야한다.
autocomplete
자동완성기능
<body> <div>autoacomplete은 자동완성기능을 넣는다는 의미.
최근에 검색한 내용이 나옴</div>
<div>이름과 성에는 자동완성기능 on, 이메일에는 off 설정해놓음</div>
<form action="/action_page.php" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
<br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
tip) <a href="이미지.png">이미지</a> 는
글자를 누르면 해당 이미지로 들어가게 함.
<a href="https://www.naver.com/">네이버</a>
이걸로 바꾸면
네이버 사이트로 이동!