09_Form,input

<form>
웹 서버에 정보를 제출하기 위한 양식 범위를 정의
<form>이 다른 <form>을 자식 요소로 포함할 수 없음.
속성 의미 값 기본값
action 전송한 정보를 처리할 웹페이지의 URL URL
autocomplete 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 on, off on
method 서버로 전송할 HTTP 방식 GET, POST GET
name 고유한 양식의 이름
novalidate 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정
target 서버로 전송 후 응답받을 방식을 지정 _self, _blank _self

 

form은 쉽게말하면 내가 웹사이트에 로그인, 보내기 등으로 뭔가 정보를 보낼때 묶을 수있는 태그이다.

 

그중 대표적인 형식으로 <input>이 있는데,

 

<input>
사용자에게 입력 받을 데이터 양식.

정보가 정말정말 많다. 

 

이라고 필기를 해두었다. 위에 써둔것처럼 옵션이 정말다양해서 다 쓰지는 못하고 heropy님 블로그에서 표를 찾아서 보던지 밑에 예제를 보면서 복습해보자.

 

<form action="/login" method = "GET" novalidate target="_blank"> <!-- novavlidate : 유효성검사를 하지않겠다.--> 
                                                                     <!-- blank : 새로운 탬에 띄우겠다.-->
        <input type="email" name = "email">
        <input type="password" name = "password">
        <button type = "submit">로그인</button>
    </form>

실행화면

쉽게말하면 form으로 아래화면같은 로그인 화면을 만드는데 쓸 수있다는 점이다. 이때 email과 password 정보를 넣으면 get이기때문에

로그인을 누른 모습

url에  입력한 아이디와 패스워드 정보가 넘어감을 알 수있다. 나는 navavlidate를 설정해 두었기 때문에 굳이 이메일 형식을 맞추지 않아도 되었다.

 

<form action="/login" method = "GET" id = "login-form">
        <input type="text" autofocus form = "login-form"> <!-- 떨어져있어도 전달가능-->
        <input type="email" name = "id">
        <input type="password" name = "ps" maxlength="6">
        <input type="submit" value = "로그인">
        <input type="number" value = "1234" readonly>
        <input type="number" placeholder = "숫자를 입력하세요!">
        <input type="number" max ="30" min = "4" step ="4">
        <input type="checkbox" checked>
        <input type="file" multiple>
        <input type="image" src="./heropy.png" alt="mingyu"> <!-- 제출버튼으로 사용 가능-->
        <input type="radio" name = "raido1">      
        <input type="radio" name = "raido1" checked>       
        <input type="radio" name = "raido1">       <!-- 3지선다--> 
        <input type="reset" value = "초기화"> <!-- form태그 안에만 초기화가된다-->        
    </form>

자 이 부분을 집중하여 보자. 여러 옵션들과 그 결과가 나올것이다.

하나씩 천천히 비교해보자

여러 옵션이 있고 보면 쉽게쉽게 기억이 날 것이다. 중요한 특징중 하나는, 이미지를 저렇게 넣으면 제출버튼으로 사용될 수 있다는 점이다.

 

 

이번에는 label과 textarea에 대해보자

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

    <!-- 라벨 가능 요소를 포함 --><!--동의하십니까를 눌러도 체크가 된다-->
    <label><input type="checkbox" />동의하십니까?</label>
   

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

    <textarea name="" id="" cols="30" rows="6" placeholder="설명을 입력하세요!"></textarea>

사실 이 부분을 설명보다 실행화면을 한번더 보는게 직관적인것 같다. 체크박스를 만들 수있고, label을 쓰면 체크박스가 아닌 동의하십니까? 를 눌러도 체크가 된다.

 

 

<label>
for나 label로 감싸서 사용.

<button>
선택 가능한 버튼을 지정 (input으로 대체 가능하지만 조금 더 직관적으로 만들 수 있다)

<textarea>
여러 줄의 일반 텍스트 양식.

<fieldset>, <legend>
같은 목적의 양식을 그룹화(<fieldset>)하여 제목(<legend>)을 지정.

 

<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>

같은양식끼리 그룹하 하여서 제목을 지정할수있다..가 설명의 끝인데 너무 직관적으로 잘 나와서 코드랑 결과를 한번씩 보면 될 것 같다.

 

<select name = "coffee" size = "4" multiple >
        <optgroup label="Coffee" name = "coffee">
          <option>Americano</option>
          <option>Caffe Mocha</option>
          <option label="Cappuccino" value="Cappuccino"></option>
        </optgroup>
        <optgroup label="Latte" disabled>
          <option>Caffe Latte</option>
          <option>Vanilla Latte</option>
        </optgroup>
        <optgroup label="Smoothie" >
          <option>Plain</option>
          <option>Strawberry</option>
          <option>Banana</option>
          <option>Mango</option>
        </optgroup>
      </select>

select도 어렵지 않다.여러 선택옵션을 한번에 출력할수있고, 중복옵션이 되게 설정(multiple)이나 크기size를 설정해서 보여줄 수있다는 옵션이 붙은것이 특징.

 

 

마지막으로 datalist와 progress가있겠다.

 

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

    <datalist id="fruits">  <!--두개 값을 연결-->
        <option>Apple</option>
        <option>Orange</option>
        <option>Banana</option>
        <option>Mango</option>
        <option>Fineapple</option>
    </datalist>

    <progress value= "70" max="100">70%</progress>
    <progress value= "0.3" >30%</progress>

저부분에 가져다대면 자동완성처럼 나오게 된다! progress는 쉽게 말해 진행과정이 나오는건데, 나중에 JS를 제대로 공부한 담에 적용시키면 좋을 예제같다. 빨리 JS도 배우고싶다.