이번 아티클부터, 본격적으로 input 태그의 종류와 속성에 대해서 살펴보겠습니다. 사실 input 태그에는 꽤 여러 가지 종류의 타입과 속성이 존재하기 때문에, 일일이 망라하는 것은 어려운 일입니다. 우선은 최대한 자주 사용하는 것들 중심으로 살펴보겠습니다.
여기서 설명하는 것 이외의 타입이나 속성들이 궁금하면, 아래의 페이지에서 예시와 함께 살펴보시기를 추천드립니다. 본 내용들을 어느 정도 이해한 이후에는 이런 리스트에서 원하는 내용만 빠르게 찾아서 사용하실 수 있을 것입니다.
<input>: 입력 요소 - HTML: Hypertext Markup Language | MDN
HTML <input> 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입
developer.mozilla.org
○ type="text" / "password" : 텍스트와 비밀번호
input type 중 text와 password는 가장 많이 사용 할수밖에 없는 타입입니다. 통상적으로 유저가 텍스트(비밀번호)를 입력하는 폼을 생성하게 되고, 여기에 전송 버튼 등을 더해 서버로 전송하는 방식으로 많이 사용합니다. 여기서 사용하는 속성은 다음과 같습니다.
- size : 필드의 '길이'를 지정합니다. 이것은 입력 제한이 아닌, "화면에 얼마나 보여줄 것인가"를 지정하는 것이 핵심입니다. 즉, 5로 지정하게 되면 5글자를 보여줄 만큼의 폼이 생성되고 그 이상의 텍스트도 입력이 가능합니다.
- maxlength : 필드에 입력할 수 있는 최대 글자 수를 지정합니다.
- value : 화면에 필드가 표시될 때, 처음부터 입력되어 있는 값입니다. placeholder와는 다르게 value가 미리 입력되어 있는 상태를 의미하며, password에서는 사용하지 않습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<fieldset>
<label for="userid">아이디: <input type="text" id="userid" size="10" value="value샘플"> </label>
<label for="password">패스워드: </label>
<input type="password" id="password" size="10">
<input type="submit" value="SIGN-IN">
</fieldset>
</form>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| 3. 입력 양식 작성(2) - input 태그 3 (0) | 2023.03.08 |
|---|---|
| 3. 입력 양식 작성(2) - input 태그 2 (0) | 2023.03.06 |
| 3. 입력 양식 작성(1) - 기본 form 태그 (0) | 2023.03.05 |
| 2. 내용 입력하기(6) - 하이퍼링크 삽입 (0) | 2023.03.03 |
| 2. 내용 입력하기(5) - 오디오/비디오 삽입 (0) | 2023.03.02 |
