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

양식

<form>

• 웹 서버에 정보를 제출하기 위한 양식 범위를 정의
• <form>이 다른 <form>을 자식 요소로 포함할 수 없음
• 속성
  • action : 전송한 정보를 처리할 웹페이지의 URL
  • autocomplete : 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 (on -> 기본값, off)
  • method : 서버로 전송할 HTTP 방식
    • GET : 입력한 정보가 전송된 주소에 담겨져서 그대로 노출 (중요한 정보일 경우 위험함)
    • POST : 입력한 정보가 전송된 주소에 보이지 않음 BUT 정보를 아예 못찾는 것은 아니므로 비밀번호 같은 경우는 암호화 하는게 좋다.
  • name : 고유한 양식의 이름
  • novalidate : 서버로 전송 시 양식 데이터의 유효성을 검사하지 않도록 지정 (특수하거나 테스트 시 사용)
    • ex ) <input type="email"> 일 경우, 이메일 양식에 맞지 않은 경우 넘어가지 않지만, novaliadate 사용 시 유효성 검사를 하지 않으므로 그냥 넘어감
  • target : 서버로 전송 후 응답받을 방식을 지정
    • _self : 현재 페이지에 띄움 (기본 값)
    • _blank : 새 페이지에 띄움
• display: block;

<form action="/login">
  <input type="email" name="email">
  <input type="password" name="password">
  <button type="submit">로그인</button>
</form>

<input />

• 사용자에게 입력 받을 데이터 양식
• 빈 태그
• 속성
  • autocomplete : 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 (on -> 기본값, off)
  • autofocus : 페이지가 로드될 때 자동으로 포커스 (Boolean, 문서 내 하나만 적용해야 함)
  • checked : 양식이 선택되었음을 표시 (Boolean)
  • type="radio" , type="checkbox" 에서만 가능
  • disabled : 양식을 비활성화 (Boolean)
  • form : <form> 의 id 속성 값, 설정하면 input 이 form 태그 바깥에 있어도 연결이 가능
  • name : 양식의 이름
  • type : (중요!) 입력 받을 데이터의 종류 (기본값 = "text")
  • maxlength : 최대 입력 가능한 길이 (number)
  • placehorder : 입력 힌트를 제공

데이터 종류(Type) 의 값(Value)

• type 속성에 입력할 수 있는 값의 목록

<input type="button" />
<input type="checkbox" />
<input type="file" />
<input type="text" />

• button : 일반 버튼
  • <button> 처럼 사용
• checkbox : 체크 박스
• email : 이메일
• file : 파일
  • multiple : 여러개의 파일 선택
• password : 비밀
• submit : 제출 버튼
• text : 일반 텍스트, 기본값
• name : 숫자 입력
  • readonly : 읽기만 가능, 고치지 못함
  • max, min : 최댓값, 최솟값
  • step : 숫자의 간격 정의
• image : 이미지 삽입 + 제출 버튼으로 활용 가능
  • src : 이미지 URL
  • alt : 이미지 설명
• radio : 해제가 되지 않는 체크박스, 보통 여러개를 연결해서 사용
  • checked : 체크가 되어있는 상태

<input type="radio" name="radio">
<input type="radio" name="radio">
<input type="radio" name="radio">

• reset : 폼 태그 안 입력값을 초기화 하는 버튼

<label>

• *라벨 가능 요소 에 라벨(제목)을 붙이는 태그

  *라벨 가능 요소: <button>, <input>, <progress>, <select>, <textarea>

  • 라벨 가능 요소와 연결하면 라벨 안 요소를 클릭해도 라벨 가능 요소가 선택됨

• 속성

  • for : 참조할 라벨 가능 요소의 id 속성 값

<!-- 라벨 가능 요소를 참조 -->
<label for="email">이메일</label>
<input type="email" id="email" />

<!-- 라벨 가능 요소를 포함 -->
<label><input type="email" />이메일</label>

• display: "inline"

<button>

• 선택 가능한 버튼을 지정
• 속성
  • autofocus : 페이지가 로드될 때 자동으로 포커스 (Boolean, 문서 내 고유해야 함)
  • disabled : 버튼을 비활성화 (Boolean)
  • form : <form> 의 id
  • name : 폼 데이터와 함께 전송되는 버튼의 이름
  • type : 버튼의 타입 ( button , reset , submit )
• display: "inline-block"

<textarea>

• 여러 줄의 일반 텍스트 방식

• 속성

  • autocomplete : 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 (on, off)
  • autofocus : 페이지가 로드될 때 자동으로 포커스 (Boolean)
  • disabled : 양식을 비활성화 (Boolean)
  • form : <form> 의 id 속성 값
  • maxlength : 입력 가능한 최대 문자 수 (number, 기본 값 : 무한)
  • name : 양식의 이름
  • placehorder : 입력 힌트를 제공
  • readonly : 읽기 전용, 수정 불가 (Boolean)
  • rows : 양식의 줄 수 (number, 기본값 : 2)

• display : inline-block;

<fieldset>, <legend>

• <fieldset> : 양식을 그룹화
  • 속성
    • disabled : 그룹 내 모든 양식 요소를 비활성화 (Boolean)
    • form : 그룹이 속할 하나 이상의 <form>의 id 속성 값
    • name : 그룹의 이름
• <legend> : 양식의 제목을 지정
• display: block;

<form>
    <fieldset>
        <legend>양식 제목</legend>
        ...
    </fieldset>
</form>

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM