[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 28회차 미션

4주차!

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 28일차입니다!

오늘은 8번째 커리큘럼의 'HTML/요소- 양식' 공부를 시작하였습니다.

순서대로라면 <form> 뒤에 <input> 강의를 들어야 하는데, 클립 양을 보고 제가 순서를 임의 조정하였습니다.

그래서 오늘은 04~06. 양식 - FORM / TEXTAREA / button 에 대하여 학습했어요.

 

<Today I Learned>

<form>

🔸 여러 입력 양식의 범위 지정

    ➡ 웹 서버에 정보를 제출하기 위한 양식 범위 정의, 특정 양식/주소로 정보 전송

🔸 <form> 태그 중첩 사용 불가

 

🔸 속성 (1) action : 사용자에게 입력받은 정보를 전송할 주소

🔸 속성 (2) autocomplete: 자동완성 기능 사용 여부, 기본값=on

🔸 속성 (3) method: 기본값=GET,

  🔹 GET: URL 주소에 보내는 정보를 포함함

  🔹 POST: URL 주소에 보내는 정보를 포함하지 않음, 하지만 개발자 도구 안에서 넘어가는 데이터를 체크할 수 있음.

      ➡ 정보를 완전히 숨길 수 없기 때문에, 보통 정보를 암호화하여 전송함

🔸 속성 (4) name: 문서에서 <form> 태그를 다수 사용할 때 구분하기 위한 이름 설정

🔸 속성 (5) novalidate : 유효성을 검사하지 않도록 설정, 특수한 테스트 환경 등에서 사용함

    🔹 (ex) input type="email" 이고 입력값이 email 양식에 맞지 않아도 전송 URL로 넘어감

🔸 속성 (6) target: 응답방식 지정, 기본값=_self

  🔹 _self: 현재 페이지에서 전송할 주소 열기

  🔹 _blank: 현재 페이지에서 전송할 주소 열기

 

<textarea>

🔸 여러 줄의 일반 텍스트 양식 (한 줄: <input>)

🔸 주요 속성 rows: 기본값=2 ➡ 기본적으로 화면에 2줄까지 보임

🔹 입력칸의 오른쪽 하단에 확대/축소 아이콘이 있어서 늘릴 수 있음.

  ➡ 새로고침하면 원래 칸 크기로 돌아감

🔹 새로고침하면 입력칸에 작성하던 내용이 사라짐

 

<button>

🔸 선택 가능한 버튼 지정

 

🔸 속성 (1) autofocus : 페이지 로드할 때 버튼을 자동 포커스, Boolean 형식

🔸 속성 (2) disabled : 버튼 비활성화, Boolean 형식

🔸 속성 (3) form : <button>의 부모의 id 속성값

🔸 속성 (4) type : 기본값=button, 일반 버튼: button / 초기화 버튼: reset / 서버 전송 버튼: submit

 

---

학습 내용 출처 : https://heropy.blog/2019/05/26/html-elements/

한눈에 보는 HTML 요소(Elements & Attributes) 총정리

강의 링크: https://bit.ly/3m0t8GM