TIL - Forms

소밍·2022년 4월 4일
0

TIL

목록 보기
6/17
post-thumbnail

📖 <form>

  • 정보를 입력하는 영역
  • 폼에 입력 후 제출하면 데이터는 서버로 전송되고,
    전송한 데이터는 웹서버가 처리하며
    처리 후 로그인 결과 화면 같은 다른 웹페이지를 클라이언트에 전송함.

<form>의 속성

  • <form action=""> 입력 값을 전송할 페이지
  • <form method=""> 데이터를 전송할 방법 정의
    • get : 웹서버에 데이터를 요청할 때
    • post : 파일 올리거나 보안 필요한 데이터 전송할 때 (사용 주소에 입력내용 나오지 않음)

📌 <input>

  • 사용자에게 폼 태그에 입력할 수 있는 공간을 만들어 주고 정보를 입력받음

속성

  • type : 태그 모양 변경 가능
  • name : 태그 이름 지정
  • readonly : 읽기 전용 태그
  • maxlength : 최대 글자 수 지정
  • minlength : 최소 글자 수 지정
  • required : 필수 태그로 지정
  • autofocus : 웹 페이지 로딩되면 이 속성 지정한 태그로 포커스 바뀜
  • placeholder : 입력할 값에 대한 힌트
  • pattern : 정규 표현식 사용하여 특정 범위 내 유효한 값 입력 받을 때 사용

type

  • text
  • button
  • password
  • search
  • date
  • time
  • range
  • number
  • color
  • radio : 선택 항목 중 하나만 선택 가능
  • checkbox : 선택 항목 중 0개 이상 선택 가능
  • file
  • email
  • url
  • tel

📌 <label>

시각 장애인분들도 폼을 사용할 수 있도록 시멘틱한 <label>요소 사용

사용법

- 텍스트의 설명과 폼 입력 모두를 포함하는 방식
<label>
	이름 :
<input type="text" name="name">
</label>

- 폼 입력에서 분리하여 for 속성을 이용해 레이블을 지정하는 방식 
<label for="myName">이름 : </label>
<input type="text" name="name" id="myName">

for 속성

  • 레이블이 속한 input과 같은 폼 컨트롤을 의미
    (input, select, textarea 와 같은 요소들)
  • for 속성의 값은 해당 레이블이 속할 폼 컨트롤의 id값과 일치해야함
  • 레이블을 선택해도 해당하는 폼 컨트롤이 선택된 것과 같이 작동.
    (즉, 클릭 할 수 있는 영역이 더 넓어져 폼 쉽게 사용 가능)

📌 <select>

  • 드롭다운 리스트 박스 생성
  • 전달될 땐 옵션의 밸류값이 전달됨.

<select> 속성들

  • multiple="multiple"

    • 사용자가 여러 요소를 선택할 수 있게 됨
    • ctrl이나 command버튼 클릭해야 선택 가능
    • 속성이름과 속성값이 같을 경우 값을 적지 않아도 됨
      그냥 multiple로 작성 가능 !
  • size
    - 드롭다운에서 한번에 보여줄 옵션의 개수 정함

<option> 속성들

  1. value : 서버에 어떤 값을 전송할지 서정
  2. selected : 페이지가 로딩되고 난 뒤 기본적으로 선택되는 옵션
    selected 옵션 사용하지 않으면 첫번째 옵션 선택되고
    아무것도 선택하지 않고 데이터를 서버로 전송하면 첫번재 옵션 값이 밸류가 전송됨.
  • 옵션하나 추가해서 선택
    <option value="0">선택</option> 하면 선택이 가장 먼저 나옴 !

📌 <fieldset>

  • 섹션과 같은 역할을 함.
  • <fieldset>를 통해 자식요소로 사용되는 폼 컨트롤을 그룹화할 수 있음

<legend> 태그

  • <fieldset> 태그 바로 뒤에 위치 (<fieldset>의 첫번째 자식)
  • 폼 그룹의 목적을 나타내는 제목을 의미

📌 <button>

  • 클릭 가능한 버튼
  • 버튼을 적을 땐 타입을 선언하는 버릇을 들이자!
  • value="" -> 버튼 안에 들어가는 글씨!

type

  • submit : 기본 값, 서버로 양식 데이터 제출
  • reset : <input type="reset"> form의 모든 값 초기화
  • button : 클릭 가능한 버튼, 사용자가 기능을 부여하기 전까지는 별 다른 작동 하지 않음

  • <input> 열린 태그 , 닫는 태그 없음 !!
    (닫는 태그 없으니 자식으로 다른 태그 쓸 수 없음)
  • <button> 열린 태그 닫힌 태그 있으니
    이미지 형식의 버튼을 만들 수도 있음

📌 <textarea>

  • 여러 줄의 text를 입력받을 수 있음 (input은 한줄만 입력 가능)
  1. cols : textarea가 보여줄 입력창의 넓이.
    양수 값만 사용 가능, 기본값은 20.
  2. rows : textarea 입력 창이 기본적으로 보여줄 입력 줄 수.
<textarea name="" id="" cols="40" rows="10" maxlength="10" minlength="5"></textarea>

📌 <datalist>

  • <datalist><select><input> 을 섞어서 사용하는 것
  • <input>list 속성을 이용해 <datalist> 요소의 id 속성과 연결하여 사용.

사용자에게 기본적으로 선택할 수 있는 옵션을 제공함과 동시에, 만약 옵션에 선택하고 싶은 값이 없는 경우 사용자가 원하는 임의의 값을 입력 받을 수 있도록 편의성을 제공

<label for="solasystem">원하는 행성을 선택하세요 : </label>
<input type="text" id="solasystem" list="planets" name="planets">
<datalist id="planets">
    <option value="수성">수성</option>
    <option value="금성">금성</option>
    <option value="지구">지구</option>
    <option value="화성">화성</option>
</datalist>


💡 자주 사용되는 속성

  • checked : 체크상태 표시
  • required : 필수값
  • min : 최솟값
  • max : 최댓값
  • value : 입력된 값
  • placeholder : 입력값 힌트
  • minlength : 최소 길이
  • maxlength : 최대 길이

  • select에서 선택해야만 제출하게 하려면
    required 속성 지정 후 첫번째 optionvalue=""
profile
생각이 길면 용기는 사라진다.

0개의 댓글