NK.Lim

Frontend

HTML 입력양식 - form

2 분 소요

form의 기본

<form action="API 주소" method="GET|POST"> </form>: form태그를 이용해 사용자로 부터 input을 받아 서버쪽으로 값 전달 가능

<input type="입력타입" name="서버에 데이터 보낼 때 이름" value="디폴트 값"/>: 입력창

  • type속성에 따라 다양하게 이용가능하다.
  • <input type="text" minlength="최소 길이 옵션" maxlength="최대 길이 옵션"/>: 텍스트 입력가능
  • <input type="password" minlength="" maxlength=""/>: 패스워드 입력시 점으로 가려져 표기
  • <input type="submit"/>: 제출 버튼 생성
  • <input type="number" min="최솟값" max="최댓값"/>: 숫자(모바일에서 숫자 키보드 나타남)
  • <input type="color"/>: 색상
  • <input type="date"/>: 날짜(연도-월-일)
  • <input type="month"/>: 날짜(연도-월)
  • <input type="week"/>: 날짜(연도-주)
  • <input type="email"/>: 이메일(@포함되어야 한다)
  • <input type="range"/>: 범위(슬라이더, min, max값 지정하여 사용)
  • <input type="search"/>: 검색창
  • <input type="tel"/>: 전화번호
  • <input type="time"/>: 시간
  • <input type="url"/>: url

ex)

<html>
  <body>
    <form action="http://localhost/login.php">
      <p>아이디:<input type="text" name="id"></p>
      <p>비밀번호:<input type="password" name="pwd"></p>
      <input type="submit"/>`
    </form>
  </body>
</html>

<form action="" autocomplete="on">: form태그 밑의 입력양식들의 자동완성기능이 on.

  • form 태그 밑 태그 중 자동완성 기능을 끄고 싶으면 해당 태그에 autocomplete="off" 해주면 됨.


<input placeholder="블라블라"/>하면 블라블라라고 희미하게 표시 되는 안내 문구.

<input autofocus/> 하면 웹페이지에 들어가자마자 포커스가 해당 입력양식에 맞춰짐.

<input required/>: 필수적으로 입력해야 하는 부분

<input disabled/>: 입력 불가하도록 하는

<input pattern="정규표현식"/>

ex) “[a-zA-Z]”:알파벳 중 하나, “.”: 모든 문자 중 하나, “.+”: 모든 문자 하나 이상

form 문자 입력: textarea

<textarea cols="" rows="">(textarea기본 값은 여기에)</textarea>: 여러 줄 입력가능

form: dropdown list

드롭다운 리스트 만들기

<option value="데이터 보낼 때 값">

<select multiple>: ctrl+선택시 다중 선택 가능

<form action="http://localhost/color.php">
    <select name="color"> 
        <option value="red">빨강</option>
        <option value="yellow">노랑</option>
        <option value="blue">파랑</option>
    </select>
</form>

form: radio, checkbox

radio 버튼은 같은 그룹에서 한 버튼만 선택되도록 한다. input의 name을 같게 지정하면 같은 그룹이 된다.

미리 선택되도록 하려면 checked 속성을 써주면 된다.

여기서의 value는 서버에 전달될 때의 값(ex. color=red 형태로 전달됨)

<p>
  <input type="radio" name="color" value="red"/>
  <input type="radio" name="color" value="black"/>
</p>


checkbox는 같은 그룹에서 여러 버튼이 다중 선택 될 수 있다.

미리 선택되도록 하려면 checked 속성을 써주면 된다.

여기서의 value는 서버에 전달될 때의 값

<p>
  <input type="checkbox" name="color" value="red"/>
  <input type="checkbox" name="color" value="black"/>
</p>

form: button

<button type="button"> 버튼에 쓰여지는 text </button>: 일반 버튼

<button type="submit"> 버튼에 쓰여지는 text </button>: 서버에 값을 전송하는 제출 버튼

<button type="reset"> 버튼에 쓰여지는 text </button>: 재설정 버튼

form: hidden

화면 상에 표시되진 않지만 값이 넘겨질 필요가 있을 때 사용.

<input type="hidden" name="" value=""/>

form: label

<label for="대상의 id"> </label>: 폼 양식에 이름표를 붙이는 태그

label을 클릭하면 해당 대상에 커서가 위치하게 됨.

input의 id를 적어줘야함.

혹은 id생략시 label태그로 대상을 감싸주면 됨.

<label for="id_txt">이름</label>
<input id="id_txt" type="text" name="id" value="default value"/>

or

<label>이름
<input type="text" name="id" value="default value"/>
</label>

form: method

서버에 데이터를 전송하는 방법: get/post

<form method="GET|POST"> </form>: form태그의 method속성에 get이나 post방식을 지정할 수 있는데 디폴트는 get이다.

<form action="http://localhost/method.php">
  <input type="text" name="id"/>
  <input type="password" name="pwd"/>
  <input type="submit"/>
</form>

-> get 방식으로 입력한 데이터 값이 url을 통해 전송된다.


<form action="http://localhost/method.php" method="POST">
  <input type="text" name="id"/>
  <input type="password" name="pwd"/>
  <input type="submit"/>
</form>

-> post 방식으로 데이터를 숨겨서 서버에 전송된다. form은 대부분 post방식을 이용하여 전송. 중요한 정보나 데이터 양이 많을 때.

form: 파일 업로드

enctype="multipart/form-data", post방식으로 전송

<form action="http://localhost/upload.php method="post" enctype="multipart/form-data">
  <input type="file" accpet="허용하는 확장자(.jpg 등)" name=""/>
  <input type="submit"/>
</form>

카테고리:

업데이트:

댓글남기기

참고