1. input type="text"
<input type="text" name="name" placeholder="이름을 입력하세요">위의 코드는 <input> 요소의 type 속성을 "text"로 지정한 예제입니다. 이는 사용자로부터 텍스트를 입력받을 수 있는 입력 필드를 생성합니다. name 속성은 폼 데이터를 서버로 전송할 때 필드를 식별하기 위해 사용되며, placeholder 속성은 사용자가 입력할 값에 대한 안내 텍스트를 제공합니다.
2. input type="password"
<input type="password" name="password" placeholder="비밀번호를 입력하세요">위의 코드는 <input> 요소의 type 속성을 "password"로 지정한 예제입니다. 이는 사용자로부터 비밀번호를 입력받을 수 있는 입력 필드를 생성합니다. 입력 내용은 화면에 표시되지 않고, 보안을 위해 마스킹되어 표시됩니다. name 속성은 폼 데이터를 서버로 전송할 때 필드를 식별하기 위해 사용되며, placeholder 속성은 사용자가 입력할 값에 대한 안내 텍스트를 제공합니다.
3. input type="checkbox"
<input type="checkbox" name="newsletter" value="subscribe">
<label for="newsletter">뉴스레터 구독</label>위의 코드는 <input> 요소의 type 속성을 "checkbox"로 지정한 예제입니다. 이는 사용자로부터 하나 이상의 선택 항목을 체크할 수 있는 체크박스를 생성합니다. name 속성은 체크박스 그룹에서 체크된 항목을 식별하기 위해 사용됩니다. value 속성은 체크된 상태일 때 해당 값이 서버로 전송됩니다.
<label> 요소를 함께 사용하여 체크박스에 대한 설명을 제공할 수 있습니다. <label> 요소의 for 속성은 연결된 <input> 요소의 id 값을 참조하여 해당 요소와 연결합니다. 이를 통해 체크박스를 클릭해도 해당 <label> 요소를 클릭한 것으로 처리됩니다.