<input> 태그
입력 필드를 만드는 태그, 닫힘태그는 없다.
- type 속성으로 어떤 종류의 데이터를 받아들일지 정의한다.
- type 값으로는 text(기본값), button 등이 있다.
<input type="text"> - password 값은 입력된 텍스트를 asterisk (*) or a dot (•)으로 대체하여 표시한다. 폼이 서버로 전송될 땐 입력된 값이 전송되니 걱정 안해도 된다.
<input type="password">
- number 값으로 입력값을 숫자로 제한한다.
- ranger 값으로 범위 조절을 가능하게 만든다.(step, min, max 속성과 함께한다.)
- checkbox 값으로 체크박스를 만든다. 다양한 옵션을 선택이 가능하다. value 속성(=값 속성)을 함께 갖는다. 값은 보이지 않지만 체크박스를 식별하기 위해 연관된 라벨을 사용하는 것이 중요하다.
- radio 값: 라디오버튼이라 부른다. 체크박스와 달리 한가지 선택만 할 수 있다. 라디오버튼 옆에 표시되는 텍스트(값)을 나타내기 위해
<label>텍스트</label>태그를 사용한다(for로 연동). 여러 라디오버튼을 그룹화 하기 위해서는 name 속성의 값을 동일하게 입력한다. 그러면 오직 한개의 라디오버튼만 선택 가능해진다. 체크박스와 같이 value 값을 갖는다(화면에 보여지지는 않는다).
-
name 속성이 없으면
<form>이 서버로 제출될 때 인풋 안의 정보를 보낼 수 없으므로 주의하자
사용자가 입력필드에 값을 넣으면 입력값(값 속성의 값)은 name 속성의 값과 쌍을 이루게 된다. -
value 속성을 이용하여 기본값을 정의하면 사용자는 미리 입력된 텍스트를 입력필드에서 볼 수 있게된다.
-
<label>와 연관되기 위해<input>태그는 id 속성이 필요하다 -
step 속성: 위아래 화살표가 입력필드 안에 생기며, 입력필드의 유효한 숫자 간격을 지정한다.
-
min, max 속성: 입력되는 숫자 범위를 지정한다.
-
required 속성: 값 입력을 요구한다.
-
minlength, maxlength 속성: 입력되는 글자수 범위를 지정한다.
-
pattern 속성: 사용자가 구체적인 가이드라인을 지켜 값을 입력해주기를 바랄때 사용한다. regex(정해진 규정)에 따라 사용자가 값을 입력해야 폼이 제출된다.
예) <input pattern"[0-9]{14,16}"> which checks that the user provided only numbers and that they entered at least 14 digits and at most 16 digits.
<label> 텍스트 </label> 태그
사용자가 입력필드에 무엇을 입력해야 하는지 표시해주는 역할을 한다.
'id'속성의 값과 동일한 값을 갖는 'for'속성을 가진다.
-- 라벨 요소(텍스트 등)를 클릭하면 해당되는 입력필드가 선택(표시)된다.
