Chapter 8. 폼 관련 태그

김승현·2021년 10월 28일
0

form 태그


  • 사용자가 입력한 data보내는 방식처리할 프로그램을 정하는 태그

속성의미
method※ get
  - URL 창을 통하여 데이터를 보내는 방식
  - data 크기에 제한이 있음 (256 ~ 4096Byte)
  - data가 눈으로 보임
※ post
  - http header 안에 포함하여 보내는 방식
  - data 크기에 제한이 없음
  - data를 쉽게 볼 수 없음 (기술적으로만 볼 수 있음)
name<form> 태그의 고유 이름 지정, <form>을 구분 하기 위해 사용
action데이터를 처리 할 프로그램(페이지)을 지정
targetaction 속성의 프로그램(페이지)를 어떻게 열 것인지를 지정
autocomplete※ 자동 저장 기능 같은 것
  - 이전 입력내용 출력하는 기능, 생략하면 자동으로 출력 (default : on)
  - form에 autocomplete를 지정하면 form에 속하는 input 들에게 모두 적용 됨

👉 작성 예시 1

<form action="https://search.naver.com/search.naver" method="get" autocomplete="on">
    <input type="text" name="query">
    <input type="submit" value="검색">
</form>

✍ 작성 예시 2

<form action="/action_page.html" method="get" autocomplete="on">   
    ID : <input type="text" name="id">  <br/>          
    PW : <input type="password" name="pw">  <br/>       
    <input type="submit">    
</form>

👉 결과 2



fieldset, legend 태그


  • fieldset :폼 요소를 그룹으로 묶는 태그
  • legend:묶은 폼 요소에 명칭을 붙이는 태그

속성의미
namefieldset의 이름 지정
formfieldset이 속한 form의 이름 지정
fieldset으로 폼요소를 묶고 legend를 통하여 묶은 폼요소에 명칭을 붙임

✍ 작성 예시

<form action="/action_page.html" method="get" autocomplete="on">
    <fieldset>
    <legend>회원가입</legend>
    ID : <input type="text" name="id"> <br/>
    PW : <input type="password" name="pw"> <br/>
    <input type="submit" value="로그인">
    </fieldset>
</form>

👉 결과 2



input 태그


  • 사용자로부터 data를 입력받기 위한 태그

  • type: 입력창의 타입을 결정하는 속성 (text,checkbox,radio,select 등)

속성의미
text한줄 짜리 텍스트 입력 창이 생김 (입력 그대로 보임)
password비밀번호 입력 창 (입력시 ●●● 으로 표시 됨)
hidden사용자에게 보이지는 않지만 값을 넣을 수 있는 창 관리자에게 필요한 값을 넣을 때 필요
button버튼 생성, 자체 별도 기능은 없고 스크립트에서 함수 연결하여 활용
checkbox체크박스 생성
file파일입력 양식 출력
image이미지 형태를 생성 (버튼 대신 이미지가 submit 역할도 함)
radio라디오 버튼 생성
submit입력한 데이터를 다른 페이지로 넘기는 기능 (submit은 제출하다라는 뜻을 가지고 있음)
reset입력한 내용을 지우는 기능
valueinput 요소의 기본값 표시
nameinput 마다 구별할 수 있는 명칭
min/max/step허용하는 범위 최소값 / 최대값 / 값의 증감값
autocomplete자동완성 기능
height/width입력창의 높이와 넓이
readonly읽기 전용 필드
accept파일 타입에 대해 사용자에게 알려주는 기능
multiple여러 개의 값을 입력 가능
placeholder사용자 입력전 입력창 표시글
autofocus입력창 커서 표시
required필수 입력 필드 지정
list<datalist>의 옵션값을 <input> 안에 나열
maxlength사용자가 입력할 수 있는 글자수의 제한
size화면에서 표시하는 글자수
minlength최소입력 글자 지정 (최신 크롬, 안드로이드만 지원)
formaction실행할 프로그램 연결 (submit / image 일때 사용)
formenctype전송시 어떤방식으로 해석할지 지정 (submit / image 일때 사용)
formnovalidate전송시 데이터가 유효한지 여부를 표시
formtarget서버의 응답을 어디에 표시할 것인지 지정

text 타입


속성의미
nametext type 구분자 또는 명칭
size사용자 화면에 보여줄 문자 입력 창의 길이
valuetext에 들어갈 값 , 설정하지 않으면 빈 값
maxlength총 입력 받을 개수

👨‍🎓 작성방법

<input type=text name="명칭" value="" size="숫자" maxlength="숫자">

password 타입


속성의미
namepassword type의 이름 또는 명칭
minlengthpassword에 들어갈 최소문자수
maxlengthpassword에 들어갈 최대문자수

👨‍🎓 작성방법

<input type=password name="명칭" minlength="숫자" maxlength="숫자">

button 타입


속성의미
idid type의 구분자(name은 중복 가능, id는 중복 불가 함)
valuebutton에 표시될 값
event자바 스크립트를 불러온 행동 (예 : onclink)

👨‍🎓 작성방법

<input type=button id="명칭" value="" onclink="스크립트 함수">

file 타입


속성의미
multiple파일 다중 선택 가능

👨‍🎓 작성방법

<input type=file name="명칭">
<input type=file name="명칭" multiple>

그외 html5에서 지원되는 input 태그의 type들


input 태그의 type의미작성 방법
color색상을 선택할 수 있게 하는 타입<input type="color" name = "명칭" />
date

datetime-local

month

week
날짜 및 시간을 선택할 수
있도록 하는 타입
<input type="타입명" id="명칭" min="0000-00-00" max="0000-00-00" step="숫자" value="날짜"/>
※ date : yyyy-mm-dd
※ detetime-local : yyyy-mm-ddT00:00(24)
※ month : yyyy-mm
time시간을 표현하는 타입<input type="time" value="12:00"/>
number숫자값을 선택하는 타입
- value: 초기 표현 값
<input type="number" min="1" max="100" step="2" value="1"/>
range슬라이드 막대로 숫자 지정<input type="range" id="명칭" min="숫자" max="숫자" value="숫자">
search

tel

email

url
- 검색어 입력하는 창 출력 입력구에 X 버튼이 생김
- 전화번호를 입력하는 창 출력 (자동으로 번호임을 인식)
- @ 를 포함하여 작성하여야 하는 창 생성 (@가 있는지 확인 함)
- 주소값을 입력하는 창 출력 (http://가 있는지 확인 함)
<input type="search"/"url"/"email"/"tel" id="명칭" value="초기값">

select, option, optgroup 태그


  • select는 option과 함께 쓰이며, option에 목록을 작성하고, select 태그를 통해 선택할 수 있게 하는 태그
  • selected 를 사용하면 기본적으로 초기 선택값을 지정할 수 있다.
  • optgroup 태그를 사용하면 목록별로 그룹을 지을 수 있다.
ex)

<select>
   
    <optgroup label="르노삼성">
        <option >SM3</option>
        <option >SM5</option>
        <option >SM6</option>
    </optgroup>
    
    <optgroup label="현대">
        <option >아반떼</option>
        <option >그랜저</option>
    </optgroup>
    
</select>

datalist 태그


  • datalist 혼자 쓰이진 않고, input 태그와 함께 쓰일 수 있음
  • select와 다른점은 input type="text"와 함께 쓰여 직접 작성이 가능
  • option 태그와 함께 쓰임
ex)

좋아하는 가수 <br/>

<datalist id="who" >
    <option value="악동뮤지션">
    <option value="아이유">
    <option value="블랙핑크">
    <option value="빅뱅">
</datalist>

<input type="text" list="who" />

textarea 태그


  • 긴 문자의 텍스트를 작성할 때 사용하는 태그
  • cols 속성과 rows 속성으로 초기 작성하는 공간 지정 가능

✍ 작성 예시

메모 : <textarea cols="50" rows="5"></textarea>
profile
개발자로 매일 한 걸음

0개의 댓글