html 요소(6)_양식

aepee·2020년 9월 24일
buttondatalistfieldsetformhtmlinputlabeloptionprogressselecttextarea
0

form

  • 웹 서버에 정보 제출하기 위한 양식 범위를 정의

  • 다른 form을 자식 요소로 포함할 수 없다

  • form 안에 <input type="submit">이든 <button type="submit">이든 type="submit"이 있다면, submit 버튼을 눌렀을 때 form 요소 안의 양식들이 action의 특정 페이지 주소로 전송된다


👇🏼 여러 속성들 👇🏼

  • action - 전송한 정보를 처리할 웹페이지의 URL ( = 사용자에게 입력받은 정보를 전송할 주소 )

  • autocomplete - 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부

  <form autocomplete="on">  // default
  <form autocomplete="off">

  • method - 서버로 전송할 HTTP 방식 ( GET (default) / POST )

  • name - 양식의 고유한 이름

  • novalidate - 서버로 전송 시 양식 데이터의 유효성을 검사하지 않도록 지정 ( 테스트 할 때 유용한 기능 )

  • target - 서버로 전송 후 응답받을 방식을 지정 ( _self (default) / _blank )

input

  • 사용자에게 입력받을 데이터 양식
  • <input> 박스를 클릭하면 포커스되면서 테두리가 강조되는데, 이것을 없애려면 outline: none;을 설정하면 된다.
    색상을 바꾸고 싶다면 outline-color: blue;

👇🏼 여러 속성들 👇🏼

  • type - 입력받을 데이터의 종류  💁 <input type=?>

  • autocomplete - 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 ( on (default) / off )

  • autofocus - 페이지가 로드될 때 자동으로 포커스 ( 문서 내 고유해야 함 )

  • value - 양식의 초깃값 설정

  • name - 양식의 이름 → 양식 이름에 따라 데이터의 이름이 정해짐
    ( 서버로 데이터 보낼 때 name 사용해 데이터 이름 지정해줘야 함 )

  • checked - 기본으로 선택된 항목 표시 ( type 속성이 radio checkbox일 경우에 )

  <input type="radio">봄
  <input type="radio" checked>여름

  <input type="checkbox" checked>가을
  <input type="checkbox">겨울
  • placeholder - 사용자가 입력할 값의 힌트 ( 어떤 값을 입력해야 하는지 )
    type="text / email / search / tel / url"인 경우
  <input type="text">  // placeholder 없으면 빈칸으로 나타남
  <input type="text" placeholder="text">
  <input type="email" placeholder="email">
  <input type="search" placeholder="search">
  <input type="tel" placeholder="tel">
  <input type="url" placeholder="url">
  • maxlength - 입력 가능한 최대 문자 수
    type="text / email / password / tel / url"인 경우
  <input type="text" maxlength="7">
  • readonly - 수정 불가능한 읽기 전용 ( 클릭 시 포커스는 됨 )
  <input type="text" readonly>
  • disabled - 양식을 비활성화 ( 포커스도 안되게 아예 비활성화 )
<input type="text" disabled>
  • form - <form>의 id 속성 값 → <form> 태그와 <input>을 연결시켜줌
  • <input> 태그를 <form> 태그 안에 작성하지 않고 외부에 작성하게 되면, <form> 태그 안의 양식을 특정 페이지로 전송할 때 같이 전송되지 않음
  • form의 id 속성 값을 <input>에 연결하면 외부에서도 사용 가능!
  <form action="/login" id="login-form">
  
  </form>

  <input type="text" form="login-form">
  • list - 참조할 <datalist>의 id 속성 값

button

  • 버튼 생성
  • <input>으로도 버튼 만들 수 있지만 <button>이 더 직관적임

  • autocomplete - 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 ( on (default) / off )

  • autofocus - 페이지가 로드될 때 자동으로 포커스 ( 문서 내 고유해야 함 )

  • form - <form>의 id 속성 값 → <form> 태그와 <button>을 연결시켜줌

  • name - form 데이터와 함께 전송되는 버튼의 이름

  • type - 버튼의 타입 ( button submit reset )

  • 등등..


textarea

  • 여러 줄의 텍스트 양식
  <textarea rows="7"></textarea>

  • autocomplete - 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 ( on (default) / off )

  • autofocus - 페이지가 로드될 때 자동으로 포커스 ( 문서 내 고유해야 함 )

  • disabled - 버튼 비활성화

  • form - <form>의 id 속성 값

  • name - 양식의 이름

  • placeholder - 사용자가 입력할 값의 힌트

  • maxlength - 입력 가능한 최대 문자 수

  • readonly - 수정 불가능한 읽기 전용

  • rows - 한 번에 볼 수 있는 양식의 줄 수 (default 2)


label

  • 라벨 가능 요소의 제목 (캡션)
  • 라벨 가능 요소는 <button> <input> <textarea> <select> <progress>
  • for 속성으로 라벨 가능 요소를 참조하거나, <label> 안에 컨텐츠로 포함
  <!-- 라벨 가능 요소 참조 -->
  <input type="checkbox" id="user-agreement">
  <label for="user-agreement">동의합니다</label>

  <!-- 라벨 가능 요소 포함 -->
  <label><input type="checkbox">동의합니다</label>

fieldset & legend

  • fieldset - 같은 목적의 양식을 그룹화
  • legend - 그룹의 제목을 설정
<form>
    <fieldset>
        <legend>Coffee</legend>
        <label>
            <input type="radio" name="coffee" value="americano">Americano
        </label>
        <label>
            <input type="radio" name="coffee" value="latte">Latte
        </label>
        <label>
            <input type="radio" name="coffee" value="cappuccino">Cappuccino
        </label>
    </fieldset>
</form>
  • disabled - 그룹 내 모든 양식 요소를 비활성화
  • form - 그룹이 속할 하나 이상의 <form>의 id 속성 값 → <form> 태그 밖에 있을 때 연결하기 위한 방법
  • name - 그룹의 이름 ( 데이터랑 상관 없이 그냥 이름 )

progress

  • 작업의 진행률 표시 - ex) 로딩바
  • max - 작업의 총량
  • value - 작업의 진행량 ( max 생략할 경우 0~1 사이의 숫자)
<progress value="60" max="100"></progress>  <!-- 60% -->
<progress value="0.6"></progress>  <!-- 0 과 1 사이의 숫자 -->

option & optgroup

- option

  • 사용자에게 선택할 수 있는 옵션을 제공
  • 선택 메뉴인 <select> / 자동완성 <datalist>에서 사용
  • 빈 태그로 사용가능하나 이 경우에는 텍스트를 쓰기 위해 label value 속성을 사용해 줘야 함
  <option>텍스트</option>

  <option label="텍스트" value="텍스트">
  • 👇🏼 옵션의 속성들 👇🏼
  • disabled - 옵션 비활성화
  • selected - 선택된 옵션 표시
  • label - 화면에 표시될 옵션의 제목 ( 생략 시 포함된 텍스트를 제목으로 표시 )
  • value - 양식으로 제출될 값 ( 생략 시 포함된 텍스트를 제출 값으로 사용 )

- optgroup

  • 옵션들을 그룹화

  • 👇🏼 속성들 👇🏼

  • label - 옵션 그룹의 이름 ( 필수 )
  • disabled - 옵션 그룹 비활성화

<select>
    <optgroup label="좋아하는 과일">
        <option>Apple</option>
        <option label="orange" value="orange">
        <option selected>Banana</option>
    </optgroup>
    <optgroup label="싫어하는 과일" disabled>
        <option>Mango</option>
        <option>pineapple</option>
    </optgroup>
</select>

select

  • <select>를 통해 사용자가 옵션을 선택
<select>
    <option>아침</option>
    <option>점심</option>
    <option>저녁</option>
</select>
  • <select>가 없으면 고를 수 있는 옵션 나타나지 않음
    <option>아침</option>
    <option>점심</option>
    <option>저녁</option>
  • 👇🏼 속성들 👇🏼

  • autocomplete - 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 ( on (default) / off )

  • disabled - 버튼 비활성화

  • form - 그룹이 속할 하나 이상의 <form>의 id 속성 값 → <form> 태그 밖에 있을 때 연결하기 위한 방법

  • name - 선택 메뉴의 이름 ( 처리되는 데이터의 이름 )

  • multiple - 다중 선택

  • size - 한 번에 볼 수 있는 행의 개수 - 기본값은 0 ( 1행 )


datalist

  • <input>에 미리 정의된 옵션을 지정하여 자동완성 기능 제공
  • <option>을 포함
  • <input>의 list 속성을 바인딩 ( list는 참조할 <datalist>의 id 속성 값 )
  <input type="text" list="fruits">

  <datalist id="fruits">
      <option>Apple</option>
      <option>Mango</option>
      <option>Banana</option>
  </datalist>
profile
aepee
📝내가 보려고 기록하는 블로그
이전 포스트

html 요소(5)_멀티미디어

다음 포스트

<input type="?">

0개의 댓글