HTML 기초 #3 (form)

 

<textarea>: 다중 행 텍스트 입력 필드로 긴 텍스트를 입력할 때 사용

<label for="message">Your Message:</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="Enter your message here"></textarea>

 

<button>: 버튼을 정의하는 태그. 버튼을 클릭했을 때 폼을 제출하거나, JavaScript 이벤트를 트리거 가능

<button type="submit">Submit</button>

 

<label>: 폼 요소에 레이블을 제공하는 태그로, for 속성을 사용하여 해당 폼 요소와 연결 가능

<label for="username">Username:</label>
<input type="text" id="username" name="username">

 

<fieldset>: 폼 요소들을 그룹화하여 시각적으로 묶을 수 있음. 주로 **<legend>**와 함께 사용

<fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
</fieldset>

 

<legend>: <fieldset> 내에서 해당 그룹의 제목을 나타냅니다.

<legend>Login Information</legend>

 

 

 

• <form> 태그는 사용자로부터 데이터를 입력받기 위한 폼을 정의하며, 다양한 입력 요소(input, textarea, select 등)를 포함할 수 있습니다.
• <input> 태그는 텍스트, 숫자, 비밀번호, 체크박스 등 다양한 형태로 데이터를 입력받을 수 있습니다.
• <select> 태그와 <textarea> 태그를 사용하여 사용자 선택 옵션과 긴 텍스트 입력을 받을 수 있습니다.
• <button> 과 <label>, <fieldset> 등을 활용하여 폼 요소를 구조적으로 구성하고, 사용자가 쉽게 상호작용할 수 있도록 디자인합니다.

 

 

 

실습

 

See the Pen form-all by Cheolho Jang (@chiro-J) on CodePen.