HTML 에서 <input> 태그는 다양한 유형의 입력 필드를 생성하는 데 사용됩니다. 이 랩에서는 적절한 type 속성을 사용하여 <input> 태그를 통해 HTML 폼에서 다양한 유형의 입력 필드를 만드는 방법을 보여줍니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
index.html이라는 새 HTML 파일을 생성합니다. 이 파일에는 입력 폼에 대한 HTML 코드가 포함됩니다.
텍스트 입력 필드를 생성하려면 다음 HTML 코드를 사용하십시오.
<label for="username">Username:</label><br />
<input type="text" id="username" name="username" /><br />코드에서 입력 필드에 대한 레이블을 생성하고, type 속성을 "text"로 설정했으며, id 및 name 속성을 할당했습니다. 이 코드는 사용자가 사용자 이름을 입력할 수 있는 텍스트 입력 필드를 생성합니다.
비밀번호 입력 필드를 생성하려면 다음 코드를 사용하십시오.
<label for="password">Password:</label><br />
<input type="password" id="password" name="password" /><br />코드에서 type 속성을 "password"로 설정했습니다. 이렇게 하면 사용자가 입력하는 비밀번호 문자가 숨겨집니다.
체크박스 입력 필드를 생성하려면 다음 코드를 사용하십시오.
<label for="vehicle1">I have a car</label>
<input type="checkbox" id="vehicle1" name="vehicle1" value="car" />
<br />
<label for="vehicle2">I have a bike</label>
<input type="checkbox" id="vehicle2" name="vehicle2" value="bike" />
<br />
<label for="vehicle3">I have a boat</label>
<input type="checkbox" id="vehicle3" name="vehicle3" value="boat" />코드에서 사용자가 선택할 수 있는 세 개의 체크박스를 생성했습니다. 각 체크박스는 서로 다른 id, name, 및 value 속성을 가지고 있습니다.
라디오 입력 필드를 생성하려면 다음 코드를 사용하십시오.
<label for="male">Male</label>
<input type="radio" id="male" name="gender" value="male" />
<br />
<label for="female">Female</label>
<input type="radio" id="female" name="gender" value="female" />
<br />
<label for="other">Other</label>
<input type="radio" id="other" name="gender" value="other" />코드에서 사용자가 성별을 선택할 수 있도록 세 개의 라디오 버튼을 생성했습니다. 각 라디오 버튼은 서로 다른 id, name, 및 value 속성을 가지고 있습니다.
제출 버튼을 생성하려면 다음 코드를 사용하십시오.
<input type="submit" value="Submit" />코드에서 사용자가 폼을 제출하기 위해 클릭할 버튼을 생성했습니다.
이 랩에서는 적절한 type 속성을 가진 <input> 태그를 사용하여 HTML 폼에서 다양한 유형의 입력 필드를 만드는 방법을 배웠습니다. 텍스트 입력, 비밀번호 입력, 체크박스 입력, 라디오 입력 및 제출 버튼을 만들었습니다. 이러한 예제를 사용하여 사용자 입력을 수집하는 더 복잡한 HTML 폼을 만들 수 있습니다.
