HTML <form> 태그 정리, 예제

<form>태그는 입력된 데이터를 서버로 전송한다. 

 

<form action="폼을 전송할 스크립트 파일" name="텍스트" method="POST/GET"> 

 

name 속성은 서버로 제출된 form data를 참조하기 위해 사용되거나, js에서 요소를 참조하기 위해 사용된다. 

해당 폼의 이름을 명시한다. 

method 속성은 데이터를 전송하는 방법이다. 보안을 위해서는 POST방식을 쓰는 것이 좋다. 

1. text input 

 

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

 

+) id와 name의 차이?

둘다 태그와 태그를 식별하는 기능을 한다.

id는 페이지 내에서 고유한 값이어야 하며 css, js, jQuery 에 사용된다.  

name은 html을 통해 양식을 제출할 때 PHP에서 양식을 처리할 떄 사용된다. 

따로따로 고유한 접근을 원할때는 id, 중복되는 것들을 한번에 접근하고 싶을 때는 name을 이용한다. 

 

+) label 추가

<label for="patty">What type of protein would you like? </label> 
             <input type="text" name="patty" id="patty"> 

 

 

input의 id값과 label의 for값을 동일하게 하면 해당 label을 눌렀을 때 텍스트필드가 클릭된다. 

 

2. password input 

 

<input type="password" name="pw" id="pw">

 

type만 password로 바꿔주면 된다. 위와 같이 텍스트안의 내용이 보이지 않는다. 

 

3. number input 

 

 <label for="amount">How many patties would you like?</label>
          <input type="number" name="amount" id="amount" step="1" >

 

step값이 초기값이고 위로 올리면 숫자가 1씩 커진다. 

 

4. range input 

   <label for="doneness">How do you want your patty cooked</label>
          <br>
   <span>Rare</span>      
   <input id="doneness" name="doneness" type="range" min="0" max="5" step="0.5">  
   <span>Well-Done</span>

<span>태그를 이용해 줄바꿈을 하지 않고 양 옆에 텍스트를 달아주었다. 

 

5.checkbox input

<span>What toppings would you like?</span>
 <br>
    <input id="lettuce" name="topping" type="checkbox" value="lettuce">
	<label for="lettuce">Lettuce</label>

    <input id="tomato" name="topping" type="checkbox" value="tomato">
    <label for="tomato">Tomato</label>
    
   <input id="cheese" name="topping" type="checkbox" value="cheese">
    <label for="new">Cheese</label>

 

 

6. radio button input 

<span>Would you like to add cheese?</span>
          <br>
<input type="radio" id="yes" name="yse" value="yes">
<label for="yes">Yes</label>

<input type="radio" id="no" name="no" value="no">
<label for="no">No</label>

 

7. dropdown list

<label for="bun">What type of bun would you like?</label>
  <select id="bun" name="bun">
    <option value="sesame" selected="selected">sesame</option>
    <option value="potato">potato</option>
    <option value="nothing">nothing</option>
   </select>

 

select 태그와 option 태그로 구성된다.

selected 속성값을 이용하여 기본 값을 원하는 옵션으로 설정해 놓을 수 도 있다. 

 

8. datalist input 

	<label for="sauce">What type of sauce would you like?</label>
       <input list="sauces" id="sauce" name="sauce">
      <datalist id="sauces">
    <option value="ketchup"></option>
    <option value="mayo"></option>
    <option value="chilli"></option>
  
  </datalist>

 

9. submit 

<input type="submit" value="전송">

 

결과적으로 submit 버튼을 누르면 action에 적어 둔 파일주소로 데이터가 전송된다.