form

48강~49강, 이메일 발송 폼, 각종 폼 입력요소

참고 사이트

Formspree/새 탭에서 열기

form : 웹 페이지에서의 입력 방식

아이디와 비밀번호 등을 입력하는 로그인 창 등을 떠올리면 된다.

<form> : form의 시작과 끝을 나타내는 태그

폼의 속성들

• name 속성 : 폼의 이름
• action 속성 : 폼 데이터를 전송받아 사용하는 백엔드 url
• method 속성 : 데이터를 전송하는 방식을 선택

input : type 속성을 통해 종류를 지정하여 다양한 입력 필드를 생성

type 속성의 여러가지 필드 종류

1. text: 한 줄의 텍스트(문자)
2. password: 비밀번호 입력, 입력 내용이 가려짐
3. submit: 양식 제출용 버튼
4. reset: 양식 초기화용 버튼
5. radio: 여러 항목 중 하나만 선택할 수 있게 한다
6. checkbox: 여러 항목을 동시에 선택,
   각 체크박스는 고유한 name 속성을 가질 수 있음
7. file: 파일을 선택하여 업로드
   enctype="multipart/form-data" 속성을 <form> 태그에 추가해야 파일 업로드가 가능
8. hidden: 사용자에게 보이지 않지만 폼 데이터와 함께 서버로 전송되는 필드
9. button: 클릭 가능한 버튼 생성
   데이터 전송 기능x ,
   주로 js와 사용(onClick등의 이벤트를 통해 함수를 호출하여 동작 구현)
10. email : email 입력받기
    (입력된 텍스트가 이메일 주소 형식을 따르는지 확인)

type 속성에 따라 텍스트, 체크박스, 라디오 버튼, 날짜 등을 표시할 수 있습니다.
type="text": 한 줄의 일반 텍스트를 입력하는 필드입니다.
readonly: 사용자가 내용을 수정할 수 없도록 읽기 전용으로 만듭니다.
placeholder: 입력 필드에 힌트 텍스트를 표시합니다. 필드에 포커스가 가거나 값이 입력되면 사라집니다.
value: 입력 필드의 초기값을 설정합니다.
type="checkbox": 여러 항목 중에서 여러 개를 선택할 수 있는 체크박스를 생성합니다.
type="radio": 여러 항목 중에서 하나만 선택할 수 있는 라디오 버튼을 생성합니다. name 속성이 같은 라디오 버튼들은 그룹으로 묶입니다.
type="date": 날짜를 선택할 수 있는 인터페이스를 제공합니다.
type="datetime-local": 날짜와 시간을 동시에 선택할 수 있는 인터페이스를 제공합니다.
type="range": 슬라이더를 통해 숫자 범위를 선택할 수 있는 인터페이스를 제공합니다.

• select : 드롭다운 리스트 생성
• option : select 요소 안에서 각 항목 정의
• name: 폼 데이터로 전송될 때 해당 select 요소의 이름 정의

(드롭다운 : 하위 메뉴들이 펼쳐지는 UI)

HTML

<select>
	<option value="kor">한국어</option>
	<option value="eng">영어</option>
	<option value="jap">일본어</option>
</select>

위 코드 출력 결과

한국어 영어 일본어

이때 사용자에게 보여지는 값은 한국어, 영어, 일본어이지만
실제 값은 kor, eng, jap이다.

value: 해당 옵션이 선택되었을 때 서버로 전송될 값을 지정합니다.
selected: 페이지 로딩 시 해당 옵션을 기본으로 선택합니다.
disabled: 해당 옵션을 선택할 수 없도록 비활성화합니다.
: 폼 요소에 레이블을 붙여줍니다. 태그와 함께 사용하여 텍스트를 묶고 스타일을 적용하거나 의미를 부여할 수 있습니다. 은 for 속성을 사용하여 특정 폼 요소와 연결할 수도 있습니다.

---

이메일 발송 폼

Formspree 사이트에 가입해서 Add New의 new form을 생성하면
Integration의 CODE EXAMPLES에 HTML 코드가 있다.
이를 복사하여 코드펜의 HTML에 붙여넣기 하면 아래와 같은 화면이 출력된다.
(화면 분할 1/2)

이 코드는 Formspree 서버로 직접 이루어진다.
아래 코드는 몇 가지 기능을 추가하여 구현한 코드이다.

HTML

<form action="https://formspree.io/f/mvgapear" method="POST" onSubmit="sendEmailForm(this); return false;">
  <label>
    Your email:
    <input type="email" name="email" placeholder="여기에 이메일 써">
  </label>
  <label>
    Your message:
    <textarea name="message"></textarea>
  </label>
  <button type="submit">Send</button>
</form>

CSS(없음)
JS

function sendEmailForm(form) {
  if (form.email.value.length == 0) {
    alert("이메일 주소를 입력해주세요.");
    form.email.focus();
    return;
  }

  if (form.message.value.length == 0) {
    alert("메세지를 입력해주세요.");
    form.message.focus();
    return;
  }

  form.submit();

  form.email.value = "";
  form.message.value = "";
}

1. 값이 비어 있는지 확인하고 비어 있을 경우 알림
2.를 통해 폼의 기본 제출 동작을 막고, sendEmailForm 함수 내에서 유효성 검사를 수행한 후에만 form.submit()을 호출하여 폼을 제출하도록 제어
3. 폼이 제출된 후 입력 필드의 내용을 자동으로 초기화
4. 이메일 입력 필드에 placeholder 속성을 추가하여 사용자에게 어떤 내용을 입력해야 하는지 미리 안내 ("여기에 이메일 써" 라는 문구 출력)

---

50강, 셀렉트 박스를 활용한 패밀리사이트