Form(3) Label
라벨은 결과만 놓고 보면, 인풋필드같은 곳에 말 그대로 라벨을 달아주는 역할을 하는 태그임.
우리가 사용하는 필드들에 이름을 붙여주는 역할
라벨태그를 사용하려면 반드시 붙여야 하는 애트리뷰트가 있다. 브라우저에게 어떤 필드를 위한 라벨인지를 알려야 하기 때문임 따라서 다음과 같은 형식을 갖는다.
<label **for = ""**> </label>
for 애트리뷰트에는 개발자가 연결시키고 싶은 인풋필드의 아이디를 적는다.
<!DOCTYPE html>
<html lang ="ko">
<label **for="user-name"**>이름</label>
<input type="text" id = **"user-name"**/>
</html>
이때는 id인데, 앞에 #을 붙이지 않는다.
이렇게 필드 앞에 라벨이 붙는다.
이때 ‘이름’이라는 단어에 마우스를 클릭하면,
이렇게 필드가 포커싱된다. 라벨과 해당 인풋필드를 연결시켰기 때문임.
지난시간 만들었던 필드에 라벨을 붙여보자.
<!DOCTYPE html>
<html lang ="ko">
<h1>
<b>
회원가입
</b>
</h1>
<link href="<https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css>" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="./styles.css">
<form action ="#" method = "POST">
<label for ="user-name">이름</label>
<input type = "text" id="user-name" required placeholder="이름"/>
<label for ="user-id">아이디</label>
<input type = "text" id = "user-id" required placeholder="아이디"
minlength="5" maxlength="10"/>
<label for ="user-password">비밀번호</label>
<input type = "password" id = "password" required placeholder="비밀번호"
minlength="6" maxlength="12"/>
<label for ="user-email">이메일</label>
<input type = "email" id ="user-email" required placeholder="이메일"/>
<label for ="user-tel">전화번호</label>
<input type = "tel" id = "user-tel" placeholder="전화번호 (***-****-***)" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"/>
<label for ="user-age">만 나이</label>
<input type = "number" id="user-age" placeholder="만 나이" min="12"
max ="122"/>
<label for ="user-file">첨부파일</label>
<input type = "file" id ="user-file" accept=".jpg, image/*, audio/*, vidoe/*"/>
<button type = "submit">
가입하기
</button>
</form>
</html>
노가다의 연속..