TIL #6 - HTML 폼

rosarang·2020년 12월 26일
0

HTML

목록 보기
4/6
post-thumbnail

폼 (form)

1. 폼 만들기

<form> 태그

<form [속성="속성 값"]> 여러 폼 요소 </form>

  • method - 사용자가 입력한 내용을 서버로 어떻게 넘겨줄지 지정

    • get - 주소 표시줄에 사용자가 입력한 내용 그대로 노출. 데이터 허용 용량 : 256byte~4096byte

    • post - 주로 사용하는 방식. 표준 입력(standard input)으로 넘겨 길이 제한 없음. 입력한 내용 드러나지 않음

  • name - 폼 이름 지정. 여러 개의 폼 구분하기 위해 사용

  • action - <form> 태그 안의 내용 처리해줄 프로그램 지정

  • target - <action> 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정

  • autocomplete - 기본값 "on". 개인 정보나 인증번호처럼 한번 쓰고 마는 경우 꺼야 함

    • on / off

검색창 예제

<form action="search.php" method="post">
	<input type="text" title="검색">
	<input type="submit" value="검색">
</form>

<label> 태그 - 폼 요소 레이블

<label [속성="속성 값"] > 레이블 <input [속성="속성 값"]> </label>

or

<label for="id이름"> 레이블 </label>
<input id="id 이름" [속성="속성 값"]>
  • 라디오 버튼, 체크박스에서도 사용됨

    • 버튼/박스 부분 뿐만 아니라 텍스트 클릭 시에도 입력되도록 하려면 <label> 태그로 레이블해야함. 예제 p.138

<fieldset>, <legend> 태그 - 폼 요소 그룹

<form>
	<fieldset [속성="속성 값"]>
		<legend> 제목 </legend>
		...
	</fieldset>
	<fieldset [속성="속성 값"]>
		<legend>제목 </legend>
		...
	</fieldset>
</form>
  • <fieldset> 태그로 묶이면 외곽선이 나타남

  • <legend> 태그는 fieldset의 제목



2. <input> 태그 유형

<input type="유형" [속성="속성 값"]>

  • 내용을 입력하는 부분과 입력한 부분을 보내는 버튼으로 나뉨

type 속성의 속성 값 - input 종류

  • hidden - 보이지 않지만 서버로 넘겨지는 값

    <input type="hidden" name="이름" value="서버로 넘길 값">

  • image - 이미지 버튼

    <input type="image" src="" alt="">

    • submit 버튼과 동일
  • color - 색상 선택 상자

    <input type="color" value="#000">

    • 16진수로만 표시

    • 브라우저마다 가능 여부 다름

  • file - 파일 첨부
    <label> 첨부파일 <input type="file"></label>

  • button - 버튼

    • 자체 기능 없음. 스크립트 함수 등을 연결해 사용
    • onclick 속성 등을 이용해 기능
      • window.open() - 새 탭 열기
      • window.close() - 닫기
  • 텍스트

    • text - 한 줄짜리 텍스트

      • 함께 사용할 수 있는 속성

        • name - 텍스트 필드 구분을 위한 이름
        • size - 필드 길이 지정
        • value - 필드 부분에 표시될 내용
        • maxlength - 최대 문자 개수
    • password - 비밀번호

      • 입력 시 . 또는 *으로 노출
  • 정보

    • search - 검색 상자

      • 텍스트 상자와 동일하나 검색어 입력 시 오른쪽에 x 표시로 나와 지울 수 있음
    • tel - 전화번호

    • url - 웹 주소

      • "http://" 로 시작해야함
    • email - 이메일

  • 숫자

    • number - 숫자 조절 화살표

    • range - 숫자 조절 슬라이드 막대, 브라우저마다 다르게 나타남

      • 함께 사용할 수 있는 속성

        • min - 기본 값 0
        • max - 기본 값 100
        • step - 기본 값 1
        • value - 필드에 표시할 초기값
  • 선택

    • checkbox - 여러 항목 선택 가능한 체크박스

    • radio - 하나만 선택 가능한 라디오 버튼

    • 함께 사용할 수 있는 속성

      • name - 같은 그룹의 라디오 버튼은 name 속성 값 똑같이 만들어야 함

      • value - 서버로 넘길 값 지정. 영문 혹은 숫자. 필수 속성

      • checked - 기본으로 선택해 놓을 항목이 있을 경우 사용

  • 날짜

    • date - 사용자 지역 기준 날짜 (tttt-mm-dd)

      • 브라우저별로 다른 형태로 표시
    • month - 사용자 지역 기준 날짜 (yyyy-mm)

    • week - 사용자 지역 기준 날짜 (yyyy-W00)

  • 시간 (https://html.spec.whatwg.org/#dates-and-times)

    • time - 사용자 지역 기준 시간 (시, 분, 초, 분할 초)

    • datetime - UTC 날짜와 시간 (연,월, 일, 시, 분, 초, 분할 초)

      • 시간대를 뒤에 표시해야함. UTC 기준일 경우 Z로 표시

      • +dd:dd나 -dd:dd로 시간 차이 직접 입력 가능

    • datetime-local - 사용자 지역 기준 날짜와 시간 (연,월, 일, 시, 분, 초, 분할 초)

    • 함께 사용할 수 있는 속성

      • min - 날짜나 시간 최솟값

      • max - 날짜나 시간 최댓값

      • step - 스핀 박스의 화살표 클릭 시 얼마나 조절할지 지정

      • value - 화면에 표시할 초기값 지정
        <input type="time" value="09:00" ...>
        <input type="datetime-local" value="2020-01-01T09:00" ...>

        • time - 00:00부터 23:59
        • datetime | datetime-local - 날짜 다음에 키워드 T를 쓰고 24시간제로 시간 지정
  • 서버 전송, 리셋 버튼
    - submit - 서버 전송 버튼
    - reset - 리셋 버튼
    - value 속성으로 버튼 내용 입력



3. <input> 태그의 다양한 속성

autofocus 속성

  • 원하는 요소에 입력 커서 표시

placeholder 속성

  • input 안에 보여지는 텍스트 힌트

readonly 속성

  • 입력이 불가능한 읽기 전용 필드
  • readonly = readonly="true" = readonly="readonly"

required 속성

  • 필수 필드 지정 (boolean 값)

  • required="required" = required

  • 미입력 시 브라우저별로 다른 경고창이 나타남

max, min, step 속성

  • 최솟값, 최댓값, 단위

  • type 속성이 datetime, datetime-local, month, week, time, number, range일 경우에만 사용 가능

size, minlength, maxlength 속성

  • 텍스트와 필드 길이 조정

  • minlength의 경우 현재 안드로이드와 최신 크롬 브라우저에서만 지원

기타 속성

  • formaction

    • 실행 프로그램 연결 (type="submit | image")
  • formenctype

    • 서버로 폼을 전송했을 때 폼 데이터를 어떤 방식으로 해석할지 지정 (type="submit | image")
  • formmethod

    • 서버로 폼을 전송하는 방식(get, post 등) 지정

    • 이미 <form> 태그 안에서 지정한 방식 있어도 무시됨

  • formnovalidate

    • <form> 태그 안에 novalidate라는 속성은 서버로 전송할 때 폼 데이터가 유효한지 여부를 표시할 수 있는데 input에서도 해당 속성을 이용해 유효성 여부를 표시할 수 있음
  • formtarget

    • 폼 데이터를 서버로 전송한 후 서버의 응답을 어디에 표시할 것인지 타깃을 지정
  • height, width

  • 이미지 너비와 높이 지정 (type="image")

  • list

    • <datalist>에 미리 정의해놓은 옵션 값을 나열해 보여줌
  • multiple

    • 두개 이상의 값을 입력 (type="email | file")

    • 태그 안에 속성 이름만 표시하면 됨



4. 여러 데이터 나열

<select>, <optgroup>, <option> 태그 - 드롭다운

<select 속성="">
	<option value="" [속성=""]> 내용1 </option>
	<option value="" [속성=""]> 내용2 </option>
	<option value="" [속성=""]> 내용3 </option>
    ...
</select>
  • <select> 태그의 속성

    • size - 화면에 표시될 메뉴 항목 개수 (크롬의 경우 지정한 갯수+1개가 표시됨)

    • multiple - 브라우저 화면에 여러 개의 옵션이 함께 표시되면서 ctrl을 누를 상태로 드롭다운 메뉴에 있는 여러 항목 선택 가능

  • <option> 태그의 속성

    • value - 서버로 넘겨질 값 지정

    • selected - 기본을 선택되는 옵션 지정

  • <optgroup> 태그

    • option 여러 개를 그룹을 묶을 경우 사용

    • label 속성을 이용해 제목을 붙여야 함

<select>
	<optgroup label="">
		<option ...>...</option>
		<option ...>...</option>
	</optgroup>
	<optgroup label="">
		<option ...>...</option>
		<option ...>...</option>
	</optgroup>
</select>

<datalist>, <option> 태그

<input type="text" list="데이터 목록 id">
	<datalist id="데이터 목록 id">
		<option> ... </option>
		<option> ... </option>
		...
	</datalist>
        
  • <select> 태그 대신 <datalist> 를 사용하면 데이터 목록 중에서 값을 선택하도록 만들 수 있음

  • 텍스트 필드와 함께 사용하기 때문에 <input> 태그와 함께 사용됨

  • number, range, color 필드는 브라우저나 버전에 따라 지원하지 않을 수 있음

  • <option> 태그 속성

    • value - 레이블 선택 시 서버로 넘겨질 값
    • label - 브라우저에 표시할 레이블. 따로 지정하지 않을 경우 value 값을 레이블로 사용

<textarea> 태그

<textarea cols="40" row="3"></textarea>

  • 메모 등을 입력하는 텍스트 창

  • 속성

    • name - 다른 폼 요소와 구분하기 위해 텍스트 영역의 이름 지정
    • cols - 가로 너비 문자 단위로 지정
    • rows - 세로 길이 줄 단위로 지정



5. 기타 폼 요소

<button> 태그 - 버튼 넣기

  • <button> 태그의 type 속성은 버튼이 활성화 되었을 때 어떤 동작을 할지 지정

  • type 속성 값

    • submit - 전송

    • reset - 폼 내용 초기화

    • button - 버튼 형태. 기능 없음

  • input과의 차이점

    • 화면 낭독기로 버튼이 있다는 것을 정확히 전달할 수 있다는 것

    • 콘텐츠 포함 가능. 아이콘을 추가하거나 CSS를 이용해 원하는 형태로 꾸밀 수 있음
      - <img> 태그로 아이콘 이미지 삽입
      - 마우스 오버 시 스타일 전환 가능
      - 태그와 CSS만으로 만들었기 때문에 input으로 이미지 넣을 때보다 서버에서 훨씬 빨리 읽어옴

<output> 태그 - 계산 결과

  • 입력하는 값이 계산 결과라는 것을 브라우저에게 알려줌 p.178

예제

<form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
	<input type="number" name="num1" value="0">
	+<input type="number" name="num2" value="0">
	=<output name="result" for="num"></output>
</form>

<progress> 태그 - 진행 상태 보여주기

  • 자바스크립트 이용 시 막대가 움직여 애니메이션처럼 보이게 가능함

  • 속성

    • value - 작업 진행 상태를 나타냄. 부동 소수점으로 표현.
      0보다 크거나 같고 max 보다 작거나 같아야 함. max값이 지정되지 않았다면 1.0보다 작아야 함

    • max - 작업이 완료되려면 얼마나 많은 작업을 해야하는지 부동 소수점으로 표현. 0보다 커야함

<meter> 태그 - 값이 차지하는 크기 표시

  • 전체 크기 중 얼마나 차지하는지를 표현할 때 사용

  • 속성

    • min, max - 최솟값과 최댓값. 기본 0과 1

    • value - 범위에서 차지하는 값

    • low - 낮은 범위의 값 지정

    • high - 높은 범위의 값 지정

    • optimum - 중간 범위의 값 지정.
      optimum 값이 high 값보다 크다면 value 값이 클수록 좋고, optimum 값이 low 값보다 작다면 value 값이 작을수록 좋음.



출처 : Do it! HTML5+CSS3 웹 표준의 정석

profile
UX에 관심 많은 개발 초보 Front-end Developer

0개의 댓글