[Web] HTML : Web Form 웹 폼

Web Form

사용자로부터 정보를 입력 전달받는 요소

데이터를 수집하고 서버로 전송하여 처리함

<form> 태그 사용하여 정의함

 

 

1. <form>

폼 요소의 컨테이너 역할

action 속성으로 데이터 경로 설정

method로 전송방식 설정

<form action="웹서버 응용프로그램의 URL"
      enctype="데이터의 인코딩 타입"
      method="GET|PPST"
      name="폼 이름"
      target="윈도우 이름">

 

 

2. <input>

다양한 종류의 입력 필드

사용자에게 입력받을 수 있음

<input type="text" name="username"> <!--단일줄텍스트-->
<input type="password" name="password"> <!--비밀번호(문자숨김)-->
<input type="email" name="email"> 
<input type="number" name="age">
<input type="checkbox" name="subscribe" value="newsletter">
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="file" name="resume">
<input type="submit" value="Submit"> <!--폼 제출 버튼-->
<input type="reset" value="Reset"> <!--폼 초기화 버튼-->
<input type="button" value="Click Me"> <!--일반버튼-->

 

 

3. <textarea>

여러줄의 텍스트를 입력할 수 있는 영역

<textarea name="comments" rows="4" cols="50"></textarea>

 

 

4. <button>

클릭 가능한 버튼을 정의

<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Hello!')">Click Me</button>

 

 

5. <label>

입력 필드와 관련된 텍스트 설명을 작성하는 역할

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

 

 

6. <datalist>

데이터 목록을 가진 텍스트 선택창

드롭다운으로 리스트 출력

<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    <option value="Opera">
</datalist>

 

 

7. <select>

콤보박스, 데이터 목록을 가진 텍스트 선택창

<select name="country">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="uk">United Kingdom</option>
</select>

 

 

8. <fieldset>

관련 폼 요소를 그룹화

<fieldset>
    <legend>Personal Information</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname">
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname">
</fieldset>

 

 

9. <legend>

<fieldset> 요소 내의 제목을 정의

<fieldset>
    <legend>Account Details</legend>
    <!-- Form elements go here -->
</fieldset>

 

 

---

 

select	combo box
- 사용자가 선택할 수 있는 항목을 제공 - 그 범위 내에서만 선택 가능	- 옵션에 없는 값도 사용자의 입력을 받을 수 있음 - 사용자가 입력창에 타이핑하면   목록 내부에 있는경우 자동완성 기능을 제공