FRONT/Html

[Front] HTML input 태그(tag)

권택현 2020. 6. 13. 21:12

html 공부를 하다가 가장 많이 보는 태그 중 하나인 태그를 따로 정리하려고 한다. 그 이유는 속성이 여러가지인데 이를 다 알아야 나중에 사용할 수 있을것 같았다.

input tag 속성
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<label for="lname">last name : </label>
<input type="text" id="lname" name="lname"><br>
<input type="button" title="tooltip" value="버튼"><br>
<input type="checkbox" value="checkbox">checkbox<br>
<input type="color" id="color1"><br>
<input type="date"><br>
<input type="email"><br>
<input type="file"><br>
<input type="hidden" value="hidden"><br>
<input type="image"><br>
<input type="number" max="12" min="0"><br>
<input type="password"><br>
<input type="radio">radio button <br>
<input type="range"><br>
<input type="reset"><br>
<input type="search"><br>
<input type="tel"><br>
<input type="time"><br>
<input type="url"><br>
<input type="week"><br>
<input type="submit" value="작성 완료">
</body>
</html>

이렇게나 많다. 사실 전부 외울 순 없지만 이렇게 어떤 속성들이 있는지 알고 필요할 때 생각나서 찾아볼 수 있게 하는것이 중요한것 같다.

참고로 <label>태그는 for속성으로 적어둔 아이디와 다른 input태그의 id와 일치하게 작성하면 label태그로 작성해둔 텍스트를 클릭하는 것으로 작성 혹은 선택을 할 수 있다.

예를 들어 속성이 checkbox였다면 체크 할 수 있다. 위 예제에서는 last name의 텍스트를 클릭하면 해당 id와 연결된 text에 작성할 수 있게 마치 텍스트 필트를 클릭한거 같은 효과를 볼 수 있다.