HTML

HTML[HTML 폼(Form)]

developer_Michael 2023. 3. 30. 18:36
반응형

HTML 폼(form)은 사용자로부터 정보를 입력받을 수 있는 방법을 제공하는 요소입니다. 

 

HTML 폼을 사용하면 사용자가 데이터를 입력하고 제출 버튼을 클릭하여 서버로 데이터를 전송할 수 있습니다. 

 

폼은 입력 필드, 버튼, 레이블 등의 요소로 구성됩니다.

 

HTML 폼 요소의 종류:

<form>: 폼을 정의하는 요소입니다.
<input>: 사용자로부터 데이터를 입력받을 수 있는 요소입니다. type 속성을 통해 입력 필드의 종류를 지정할 수 있습니다.
<textarea>: 여러 줄의 텍스트를 입력받을 수 있는 요소입니다.
<select>: 드롭다운 목록을 생성할 수 있는 요소입니다.
<option>: 드롭다운 목록의 선택지를 정의하는 요소입니다.
<label>: 입력 필드와 레이블을 연결하는 요소입니다.
<button>: 버튼을 정의하는 요소입니다.

 

HTML 폼 요소는 name 속성을 사용하여 서버로 전송될 데이터의 이름을 지정할 수 있습니다. 

 

value 속성을 사용하여 입력된 값을 지정할 수도 있습니다.

<form action="/submit-form" method="post">
  <label for="username">사용자 이름:</label>
  <input type="text" id="username" name="username" required>
  
  <label for="password">비밀번호:</label>
  <input type="password" id="password" name="password" required>
  
  <label for="gender">성별:</label>
  <select id="gender" name="gender">
    <option value="male">남성</option>
    <option value="female">여성</option>
  </select>
  
  <button type="submit">제출</button>
</form>

 

 

위 코드는 사용자 이름, 비밀번호, 성별을 입력받고 제출 버튼을 누르면 

 

/submit-form URL로 POST 요청을 보내는 폼을 생성하는 코드입니다. 

 

input 요소에서 required 속성을 사용하여 필수 입력 필드로 지정하였으며, 

 

select 요소를 사용하여 드롭다운 목록을 만들었습니다. button 요소를 사용하여 제출 버튼을 만들었습니다.

반응형