[html]_10(form)

2 minute read

양식 FORM

form태그

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

속성

action : 전송한 정보를 처리할 웹페이지
autocomplete : 이전에 입력한 값을 자동완성할 것인가? 기본값은 on이다.
method : 서버로 전송할 HTTP 방식 get inpute에 입력한 정보가 나온다.post 입력한 정보가 나오지 않는다.
name : 양식의 이름
novalidate : 서버로 전송시 유효성 검사를 하지않도록 지정 이메일 양식등..
target : 서버로 전송 후 응답받을 방식을 지정 새로운 페이지롤 열지를 설정한다.

    
    
    <form action="/login" method="POST" 
    autocomplete="off" novalidate target="_blank">
    action          -/login이라는 페이지로 전송을 할 것이다. 
    method          -입력된 값들을 URL에 표시하지 않는다.  
    autocomplete    -입력창에 자동완성 기능을 끈다.
    novalidate      -유효성 검사를 하지 않는다. 이메일 형식이 맞는지  
    target          -/login 페이지로 넘어갈때 새로운 탭에서 열리게 한다.
        <input type="email" name="email">
        <input type="password" name="password">
        <button type="submit">로그인</button>
    email종류의 인풋을 'email'에 저장한다.
    password종류의 인풋을 'password'에 저장한다.
    submit타입의 버튼 태그로 '로그인'은 wrap해서 만든다.

    </form>

input 태그 /빈태그 형식

사용자에게 입력 받을 데이터 양식
속성

autocomplete : 자동완성 기능 설정
autofocus : 페이지가 오픈 시 자동으로 포커스,입력창에 커서가 가있다.
form : form 의 id값을 사용하여 연결한다. input이 form태그안에 없어도 연결되게 한다.
name : 양식의 이름
type : 입력 받을 데이터의 종류
disabled,readonly : 데이터양식 값만 남긴다.
placeholder - 힌트 주는 것

type 속성의 받을 종류의 값

button : 일반적인 버튼
checkbox : 체크박스 ex동의 박스
email
file : multiple 여러개 파일
password
submit : 제출 버튼
maxlength : 입력최대값의 길이
number : 숫자만 입력받음
radio : 여러개중 한개 선택 name을 묶어줘서 그중 하나를 선택하게 만든다.
reset : form태그에 묶인 input들의 입력되어 있는 값들을 초기화 한다.

 <form action="/login">
       <input type="image" src="./images/heropy.png" alt="헤로피">
   </form>

input image를 사용하여 제출하는 방식을 만들 수 있다.

label 태그

for 속성으로 라벨 가능 요소를 참조하거나 콘텐츠로 포함. 라벨 가능 요소: <button>, <input>, <progress>,
<select>, <textarea>

<input type="checkbox" id="user-agreement" />
<label for="user-agreement">동의하십니까?</label>


<label><input type="checkbox" />동의하십니까?</label>

둘은 똑같은 값을 나타낸다.
for속성을 사용하여 id값으로 연결하거나 label태그로 묶는다.

동의하십니까?

button 태그

선택 가능한 버튼을 설정한다.

type : submit, button,reset

<button onclick="doit()">클릭하세요</button>
    <script>
    function doit() {
        alert("클릭햇습니다");
    }
    
    </script>


```html  
<button onclick="doit()">클릭하세요</button>
    <script>
    function doit() {
        alert("클릭햇습니다");
    }
    
    </script>

textarea 태그

속성
input의 속성과 비슷하다.

rows : 양식의 줄의 수 기본2

<textarea rows="10" placeholder="설명을 입력하세요"></textarea>

fiedlset, legend 태그

fiedlset 같은 목적의 양식을 그룹화
legend 제목을 지정
속성
disabled - 양식 요소를 비활성화 선택을 못하게 한다.
form form태그 밖에서 사용할때 id로 이어준다.
name fieldset의 name

<form>
  <fieldset>
    <legend>Coffee Size</legend>
    <label>
        <input type="radio" name="size" value="tall" />
        Tall
    </label>
    <label>
        <input type="radio" name="size" value="grande" />
        Grande
    </label>
    <label>
        <input type="radio" name="size" value="venti" />
        Venti
    </label>
  </fieldset>
</form>

속성에 disabled 작성시

option, optgroup, select, datalist 태그

select

옵션을 선택하는 메뉴
속성

autocomplete 자동완성기능
disabled 선택 메뉴를 비활성화
form
multiple 다중선택 여부
name
size 한 번에 볼 수 있는 행의 개수

optgroup

option을 그룹화 한다.

label 옵션그룹의 이름

option

선택 메뉴 select, 자동완성 datalist에서 사용될 옵션.
빈 태그 형식이다.

label 옵션의 제목
value 제출될 값
label과 value를 표시하지 않으면 옵션태그안에 묶인 텍스트가 값과 제목이 된다.
빈 태그 형식으로 작성시 label, value가 꼭 기입되어야한다.

datalist 태그

input 태그에 미리 정의된 옵션을 지정하여 자동완성
input 태그의 list값과 datalist의 id 값이 같아야 한다.

<input type="text" list="fruits">

    <datalist id="fruits">
      <option>Apple</option>
      <option>Orange</option>
      <option>Banana</option>
      <option>Mango</option>
      <option>Fineapple</option>
    </datalist>

<datalist id="fruits">
  <option>Apple</option>
  <option>Orange</option>
  <option>Banana</option>
  <option>Mango</option>
  <option>Fineapple</option>
</datalist>

progress 태그

작업의 완료 진행률을 표시 ex)로딩바

max 작업의 총량
value 작업의 진행량

Twitter Facebook LinkedIn

Duckey Kim