[HTML] 8. 폼 관련 요소

in HTML on Html



8. 폼 관련 요소

1. form 소개

  • 사용자가 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획
  • 사용자와 interaction을 한다.
  • 사용자에게 정보를 입력받아서 서버로 보낸다.
  • 회원가입, 설문조사 …
  • 필수 정보 입력 여부 정도까지는 html 로 가능하다.
  • form 만 있고 안에 요소가 없으면 눈에 보이지 않는다.
<form action="" method="POST" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required>
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required>
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!">
  </div>
</form>



2. form - action, method 속성

action

  • 서버로 보내질 경로를 보낸다.
  • action = "http://server.com/join"
  • 절대경로, 상대경로 모두 가능하다.

method

  • 양식을 제출할 때 하용할 http 메서드
  • POST : 주소창에 입력된 데이터가 노출되지 않는다.
  • GET : url 에 name = “입력된 데이터” 로 노출 / 보안이 중요한 데이터는 지양
  • DIALOG



3. label과 input

<form action="" method="GET" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    // name과 id는 같을 필요가 없다.
    <input type="text" name="serverName" id="name" required>
  </div>
  <div class="form-example">
    // label 의 자식요소로 input을 넣으면 for를 하지 않아도 된다.
    <label>Enter your email:
         <input type="email" name="email" id="email" required>
    </label>
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!">
  </div>
</form>

label

  • input 하나당 앞에 붇는 label
  • 사용자 접근성, 시멘틱웹에서 중요하다
  • 가능한 text로 적는다.

for

  • label이 input의 짝을 찾기 위한 요소
  • input-id 값과 같은 것을 찾는다.

name

  • 서버로 보내지는 이름
  • 하나의 폼에서 구분짓는다.
  • 여러개의 폼이라면 중복되어도 된다 (한 폼당 유일한 하나의 값)

id

  • 한 문서에서 겹치면 안된다.
  • label 과 짝이 되는 값



4. fieldset, legend

  • 여러가지 input과 label을 하나로 묶는 요소
  • 그룹끼리 하나의 역할이 있을때 시멘틱한 요소로 나눌 때 사용
  • 실선으로 그룹이 묶인다!
  • input 하나하나에 disabled 를 주지 않고 필드셋에 하나로 줄 수 있다.
  • legend : fieldset 자식의 첫번째 요소, field의 범례로 사용
<form>
  <fieldset disabled>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster">
    <label for="kraken">Kraken</label><br/>

    <input type="radio" id="sasquatch" name="monster">
    <label for="sasquatch">Sasquatch</label><br/>

    <input type="radio" id="mothman" name="monster">
    <label for="mothman">Mothman</label>
  </fieldset>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="sasquatch" name="monster">
    <label for="sasquatch">Sasquatch</label><br/>

    <input type="radio" id="mothman" name="monster">
    <label for="mothman">Mothman</label>
  </fieldset>
</form>



5. input - type 속성

  • 다양한 타입이 존재한다
  • 타입별로 생김새가 달라진다


type=”text”

<input type="text" minlength="5" maxlength="10">

  • 한 줄만 가능
  • 개행 안된다
  • minlength=”5”
  • maxlength=”10”


type=”password”

<input type="passowrd" minlength="5" maxlength="10">

  • 마스킹 되어 입력된다.
  • get으로 전송시 url에 전부 노출된다.


type=”email”

<input type="email" minlength="5" maxlength="10">

  • 이메일 형식에 맞지 않으면 오류 메세지 띄어준다.
  • 모바일 환경에서 email 형식 띄어준다.


type=”tel”

<input type="tel" minlength="5" maxlength="10">

  • 문자열을 입력했다고 해서 오류메세지가 띄어지진 않는다.
  • 모바일 환경에서 숫자를 먼저 띄어준다.


type=”number”

<input type="number">

  • 숫자가 들어가지 않으면 오류메세지 띄어준다.


type=”range”

<input type="range">

  • 막대기로 된 바로 최대/최소 가능


type=”date”

연/월/일 <input type="date">


연/월 <input type="month">


시간 <input type="time">

type=”submit”

<input type="submit" value="보낸다">

  • 기본값 : 제출
  • value 로 변경 가능


type=”reset”

<input type="reset">

  • 기본값 : 초기화
  • 폼 내부에 있는 모든 정보가 초기화 된다.


type=”checkbox”

<input type="checkbox" name="check1" checked>

  • 체크된 경우 url에 on 표시된다.
  • check1 = on
  • 이미 체크된 상태이길 바란다면 checked
  • 중복체크 가능


type=”radio”

<input type="radio" name="radioBtn" value="r1">
<input type="radio" name="radioBtn" value="r2" checked>
<input type="radio" name="radioBtn" value="r3">
  • 중복체크 불가능
  • name이 다르다면 중복체크 가능
  • 3번째가 체크된다면 radio=r3 (value 값으로)
  • 처음부터 체크된 상태 checked

6. input - name, placeholder, autocomplete, required 속성

name

  • 전체 폼데이터에서 이 필드가 어떤 데이터를 갖고 있는지 구별하는 역할
  • get/post 에 들어가는 필드명

placeholder

  • 기본값과는 다르다.
  • hint의 개념

autocomplete

<input type="text" name="text" autocomplete="on">

  • 자동완성 기능을 만들 수 있다.
  • 후보값을 보여준다.
  • on/off 가능

required

  • 입력을 안하고 제출하면 오류메세지 보여준다.



7. input - disabled, readonly 속성

disabled

<input type="text" name="text" disabled>

  • 입력받지 않는다.
  • 제출시 값도 제출되지 않는다. (필드자체가 전송되지 않는다.)
  • ui/ux 상으로 눈에는 보였으면 좋겠지만 전송은 안됐으면 좋겠는 데이터를 다룰 때

readonly

<input type="text" name="text" readonly>

  • 입력이 안된다.
  • 수정도 안된다.
  • 미리 값을 지정해두고 바로 쓰고 싶을 때
  • value 로 미리 값을 주지 않고 빈데이터로 제출된다면 필드=null 로 전송된다.
  • 기본값을 전송시키고 싶을 때 사용



8. input - step, min, max

min, max

<input type="number" name="num" min="0" max="10" >

  • 숫자값의 최대,최소

step

<input type="number" name="num" min="0" max="10" step="2" >

  • number를 사용해서 위아래 화살표로 변할 수 있는 증가값, 최솟값 범위
  • range에서도 사용 가능



9. button

  • 클릭 가능한 버튼

type

  • submit : 서버로 양식 데이터를 제출
  • reset : 모든 컨트롤을 초깃값으로 되돌린다.
  • button : 기본 행동이 없으며 클릭했을 때 아무것도 하지 않는다 (js로 연동 가능)
// 문자열만 가능
<input type="submit" value="제출">
<input type="reset" value="리셋">
<input type="button"  value="버튼">

// 태그 입력 가능
<button type="submit">제출</button>
<button type="reset">리셋</button>
<button type="button">버튼</button>
  • input은 빈요소이기때문에 자식태그를 갖지 못한다.
  • button은 자식태그 가질 수 있다
  • 버튼 자식요소로 아이콘만 넣는 것은 좋지 않다. 텍스트도 같이 넣을 것(for 텍스트리더)



10. select, option, optgroup

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select" required>
    <optgroup label="pet">
        <option value="">--Please choose an option--</option>
        <option value="dog">Dog</option>
        <option value="cat" selected>Cat</option>
        <option value="hamster" disabled>Hamster</option>
        <option value="parrot">Parrot</option>
        <option value="spider">Spider</option>
        <option value="goldfish">Goldfish</option>
        </optgroup>
    <optgroup label="food">
        <option value="apple">apple</option>
        <option value="banana">banana</option>
    </optgroup>

</select>
  • 옵션 중 첫번째 값이 기본값
  • value : 서버로 보내지는 값
  • 첫번째 값은 안내를 위한 값이다. 제출 막으려면 value=”” 로 빈문자열 만들어줘야한다.
  • 선택된 값으로 만들고 싶다면 selected



11. input - list 속성과 datalist

datalist

  • 다른 컨르롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 option 태그를 여러개 담는다.
<label for="ice-cream-choice">Choose a flavor:</label>
<input type="text" list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>
  • label for => input id
  • datalist id => input list
  • select 는 option 중 선택한 뒤 수정 불가능
  • datalist 는 추천만 해주는 것이지 수정 가능



12. textarea

<label for="story">Tell us your story:</label>

<textarea id="story" name="story" rows="5" cols="33">
        It was a dark and stormy night...
</textarea>
  • input type = “text”와 유사
  • 자식요소 가질 수 있다.
  • 미리 내용을 작성해둘 수 있다.
  • pre 태그와 같이 스페이스, 개행 모두 반영된다.
  • rows : 행
  • cols : 열
  • rows / cols 는 폰트 사이즈에 따라 다르므로 css의 height/width 권장



나의 회고 🤫

input type 요소로 text, button, checkbox, radio 만 자주 썼어서 이렇게 다양한 타입이 존재하는지 몰랐다.
그동안은 html 만으로는 할 수 있는 것이 별로 없다고 생각했는데 css, js를 곁들이지 않더라도 꽤 다양한 기능을 만들 수 있을 것 같다는 생각이 들었다.
특히 input type=”button” 과 버튼태그를 사용했을 때 차이점을 모르고 그냥 관습적으로 사용했는데 그것을 정확히 알 수 있어서 좋았다.
이런 기본 지식 없이 지금까지 내가 개발을 할 수 있었다는게 신기할 따름이다.
나는 정말 야매였다…😭