[HTML] Form 을 배워보자

 

1. HTML은 유저의 input을 수집하기 위한 도구
2. HTML에는 수많은 Form 타입이 있음 : text field, textarea, checkboxes, radio buttons, option selection, submit buttons, ...
3. 예를들어 유저가 submit 버튼을 누른다면 유저가 input한 데이터가 서버로 전송됨

Form - type text 

    <form>
        First name:<br />
        <input type="text" name="firstname" size="30"><br />
        <!-- size 30 means can display 30 characters only-->
        Last name:<br />
        <input type="text" name="lastname" size="30"><br />
      
        </form>

<input type="타입명" name="할당 할 이름" size="데이터의 크기" 

 

단순히 글자를 적을수있는 타입 주로 아이디에 사용

 

 

Form - type password

<form>
Username:<br />
<input type="text" name="username" size="30"><br />
Password:<br />
<input type="password" name="password" size="30"><br />

</form>

<input type="타입명" name="할당 할 이름" size="데이터의 크기" 

 

타입에 "password"를 적음으로써 입력되는 데이터가 전부 비공개 처리되어서 보임 

 

Form - type checkbox

<form>
        Choose journals to subscribe:<br />
        <input type="checkbox" name="journal" value="AMM">American
        Mathematical Monthly<br />
        <input type="checkbox" name="journal" value="CMJ">College
        Mathematics Journal<br />
        <input type="checkbox" name="journal" value="MM">Mathematics
        Magazine<br />

        </form>

<input type="타입명" name="할당 할 이름" value="서버에 전송되는 데이터의 이름" 

 

name은 같아야함 같은 데이터인데 세부적인 선택사항을 선택하는거이기 때문

 

Radio 타입과는 다르게 다중선택 가능

 

Form - type radio

 <form>
        Select student type:<br />
        <input type="radio" name="studentType" value="u">Undergraduate
        <input type="radio" name="studentType" value="p">Postgraduate
        <input type="radio" name="studentType" value="other">Other
        
        </form>

<input type="타입명" name="할당 할 이름" value="서버에 전송되는 데이터의 이름" 

 

한가지만 선택 가능

 - name 을 전부 다 다르게 준다면 다중 선택 가능 

 

Form - select

 <form>
        Select day:<br />
        <select name="day">
        <option value="mon">Monday</option>
        <option value="tue">Tuesday</option>
        <option value="wed">Wednesday</option>
        <option value="thu">Thursday</option>
        <option value="fri">Friday</option>
        </select>

        </form>

<select name="할당 할 이름">

<option vlaue="서버에 전송되는 데이터의 이름">화면에 보여지는 이름</option>

 

Form - select multiple

  <form>
        Select day:<br />
        <select name="day" multiple>
        <option value="mon">Monday</option>
        <option value="tue">Tuesday</option>
        <option value="wed">Wednesday</option>
        <option value="thu">Thursday</option>
        <option value="fri">Friday</option>
        </select>
        
        </form>

 

<select name="할당 할 이름" multiple>  

multiple 추가 시 다중선택 가능

 

Form - textarea

  <form>
        Enter your comment:<br />
        <textarea name="comment" rows="5" cols="30">
        </textarea>
        
        </form>

 

<textarea name="할당 할 이름" rows="가로 길이" cols="세로 길이">

 

Form - submit

<form action="handle_login" method="post">
        Username:<br />
        <input type="text" name="username" size="30"><br />
        Password:<br />
        <input type="password" name="password" size="30"><br /><br />
        <input type="submit" value="Login">
        <input type="reset" value="Reset form">
        </form>

 

action="submit 버튼을 누를시 열려야하는 파일 명 혹은 링크"

 

metohd="get" - 입력했던 모든 데이터가 URL형식으로 변환

• 검색 기록에 데이터들이 저장됨
• 데이터 크기에 제한이 있음 (URL이 포함할 수 있는 최대 글자 수가 2048자이기 때문)

metohd="post" - 입력했던 모든 데이터가 텍스트 파일로 변환

• URL에 포함이 안되어서 get보다 더 보안적이긴하지만 비밀번호 같은 데이터들이 가려지지 않은채로 파일 형식으로 저장됨
• 검색 기록에 데이터가 저장되지 않음
• 데이터에 대해 제한이 거의 없음 (길이,글자타입 등등)

Form - submission

 

<form>
        First name:<br />
        <input type="text" name="firstname" size="30"><br />
        Last name:<br />
        <input type="text" name="lastname" size="30"><br />
        Select day:<br />
        <select name="day">
        <option value="mon">Monday</option>
        <option value="tue">Tuesday</option>
        <option value="wed">Wednesday</option>
        <option value="thu">Thursday</option>
        <option value="fri">Friday</option>
        </select>
        
        </form>

 

Form - Action 응용

 

<html>
<head>
<title>Google search</title>
</head>
<body>

<h1>Google search</h1>

<form action="https://www.google.com/search" method="get">

  Type keywords to search: 
  <input type="text" name="q">
  
  <select name="tbm">
    <option value="" selected>All</option>
    <option value="nws">News</option>
    <option value="vid">Videos</option>
    <option value="isch">Images</option>
    <option value="shop">Shopping</option>
	<option value="bks">Books</option>
	<option value="app">Apps</option>
  </select>
   

  <br />
  <br />

  <input type="submit" value="Search">
  <input type="reset" value="Reset form">

</form>

</body>
</html>

 

<form action="https://www.google.com/search" method="get">

action="구글 검색 링크"

새로운 창이 열리고 검색 결과가 나옴 method="get"을 사용했기 때문

• post 사용시 검색 결과가 안나옴

 

<select name="tbm"> 
    <option value="" selected>All</option>
    <option value="nws">News</option>
    <option value="vid">Videos</option>
    <option value="isch">Images</option>
    <option value="shop">Shopping</option>
<option value="bks">Books</option>
<option value="app">Apps</option>
  </select>

구글에 있는 검색 메뉴를 선택 가능