IT 강좌 HTML 기초 013_폼과 사용자 입력

폼

HTML 폼(Form)은 HTML에서 매우 중요한 부분으로, 사용자가 웹페이지에서 정보를 입력하고 서버로 정보를 제출할 수 있게 해줍니다.

예제:

1
<form action="/submit" method="post">
2
  <!-- 폼 요소가 여기에 들어갑니다 -->
3
</form>

<form> 요소는 사용자 입력 데이터의 영역을 정의하며, 텍스트 영역 <textarea>, 드롭다운 목록 <select>, 라디오 버튼 <radio>, 체크박스 <checkbox>, 버튼 <button> 등 다양한 유형의 입력 요소를 포함할 수 있습니다.

폼 속성:

• action: 폼 데이터가 서버로 제출된 후 처리 파일의 URL을 정의합니다.
• method: 데이터를 서버로 전송할 때 사용하는 HTTP 메서드를 정의하며, 일반적으로 “get”과 “post” 값을 사용합니다.
• name: 폼의 이름을 지정하는 데 사용됩니다. 폼 이름은 폼을 식별하고 서버 측에서 폼 데이터를 처리할 때 사용됩니다.
• enctype: 폼 데이터의 인코딩 방식을 지정하는 데 사용됩니다. 폼 데이터는 application/x-www-form-urlencoded 또는 multipart/form-data 인코딩 방식을 사용할 수 있습니다.
• autocomplete: 폼의 자동 완성 기능을 활성화할지 여부를 지정하는 데 사용됩니다. on으로 설정하면 브라우저가 이전에 입력한 데이터로 폼을 자동으로 채웁니다.
• novalidate: 폼 데이터를 검증할지 여부를 지정하는 데 사용됩니다. on으로 설정하면 폼 데이터가 제출되기 전에 검증되지 않습니다.

[!요약]

• form 폼 자체는 보이지 않습니다.

텍스트 필드

폼에서 사용자가 문자, 숫자 등의 텍스트 내용을 입력해야 하는 경우가 자주 있습니다. 이는 <input> 요소를 통해 완료할 수 있으며, type 속성을 “text”로 설정합니다.

예제:

1
<form>
2
이름: <input type="text" name="name"><br>
3
나이: <input type="text" name="age">
4
</form>

효과:

[!요약]

• 대부분의 브라우저에서 텍스트 필드의 기본 너비는 20자입니다.

비밀번호 필드

사용자가 비밀번호를 입력해야 하는 경우, <input> 요소의 type 속성을 “password”로 설정할 수 있으며, 입력된 내용은 숨겨집니다.

예제:

1
<form>
2
비밀번호: <input type="password" name="pwd">
3
</form>

효과:

[!요약]

• 비밀번호 필드 문자는 평문으로 표시되지 않고 별표 * 또는 점 .으로 대체됩니다.

라디오 버튼(Radio Buttons)

라디오 버튼과 체크박스는 사용자가 여러 옵션 중 하나 또는 여러 개를 선택할 수 있게 해줍니다. 라디오 버튼의 type 속성 값은 “radio”입니다.

예제:

1
<form action="">
2
성별:
3
<input type="radio" name="sex" value="male" checked>남성
4
<input type="radio" name="sex" value="female">여성
5
</form>

효과:

[!요약]

• 라디오 버튼의 name 속성 값은 동일해야 하며, 그렇지 않으면 같은 그룹에 속하지 않습니다.
• checked 속성은 라디오 버튼의 기본 선택 여부를 지정하는 데 사용됩니다.

체크박스(Checkboxes)

체크박스는 하나 이상의 옵션을 선택할 수 있으며, **<input type="checkbox">**로 정의합니다.

예제:

1
<form>
2
  사용해 본 앱:
3
  <input type="checkbox" name="app" value="jd">JD
4
  <input type="checkbox" name="app" value="wechat">WeChat
5
  <input type="checkbox" name="app" value="qq">QQ
6
  <input type="checkbox" name="app" value="douyin">Douyin
7
</form>

효과:

[!요약]

• checked 속성은 체크박스의 기본 선택 여부를 지정하는 데 사용됩니다.

드롭다운 목록(select)

드롭다운 목록은 사용자가 여러 옵션 중 하나를 선택할 수 있게 해줍니다. <select> 요소로 생성되며, <option> 요소를 사용하여 옵션을 정의합니다.

예제:

1
<form action="">
2
  국가를 선택하세요:
3
  <select name="country">
4
    <option value="china">중국</option>
5
    <option value="us">미국</option>
6
    <option value="japan">일본</option>
7
  </select>
8
</form>

효과:

[!요약]

• selected 속성은 드롭다운 목록의 기본 옵션을 지정하는 데 사용됩니다.
• disabled 속성은 드롭다운 목록의 사용 가능 여부를 지정하는 데 사용됩니다.
• size 속성을 사용하여 드롭다운 목록에서 표시되는 옵션 수를 지정할 수 있습니다.

제출 버튼(Submit, Reset, Button)

폼은 일반적으로 사용자의 입력을 제출하거나 확인하기 위한 버튼이 필요합니다. submit, reset, button은 모두 HTML의 폼 버튼 요소입니다.

예제:

1
<form action="/submit" method="post">
2
  <input type="submit" value="제출 버튼">
3
  <input type="reset" value="초기화 버튼">
4
  <button type="button" value="확인 버튼">확인 버튼</button>
5
  <input type="image" src="[zhaojian-avatar.png (1332×1332)](https://www.zhaojian.net/images/zhaojian-avatar.png)" alt="이미지 버튼" width="50" height="50">
6
</form>

효과:

[!요약]

• post: HTTP POST 메서드를 의미하며, 폼 데이터가 폼 본문에 포함되어 서버로 전송됩니다. 사용자 이름 및 비밀번호와 같은 민감한 데이터를 제출하는 데 사용됩니다.
• get: 기본값으로 HTTP GET 메서드를 의미하며, 폼 데이터가 action 속성의 URL에 추가되고 ?를 구분 기호로 사용합니다. 일반적으로 페이징과 같은 민감하지 않은 정보에 사용됩니다. 예: https://www.zhaojian.net/?page=1, 여기서 page=1은 get 메서드로 제출된 데이터입니다.

폼 요소 및 속성