[WEB] form(폼) 태그 사용하는 방법과 속성

form(폼) 태그 사용하는 방법과 속성

 

서버로 유저의 정보를 전송하려고 사용한다

사용자 의견이나 정보를 알기 위해 입력 하는 틀을 폼이라고 생각하면된다

폼(form) 태그 속성에는 name, action, method, target 등 다양한 속성들이 있다

 

form	설명
action	폼 전송할 서버 쪽 스크립트 파일을 지정한다.
name	폼을 식별하기 위한 이름을 지정한다
accept-charset	폼 전송에 사용할 문자 인코딩을 지정한다
taget:action	action 에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다
method	폼을 서버에 전송할 http 메소드를 정한다.

 

form을 구성하는 태그 요소

<fieldset>,<legend> 태그

 

<fieldset>태그는 폼(form)태그 안에 관련 있는 요소들을 그룹화 할 때 사용한다

<fieldset>태그의 자식으로 <legend>태그를 사용해서

요소들의 쓰임에 맞게 이름을 정해 줄 수 있다

 <form action="success.html">
          <fieldset style="border: 2px solid chocolate">
            사용자 정보 입력
            <legend style="border: 2px solid salmon">
              <div class="my-3">
                <input type="text" class="form-control" />
              </div>
            </legend>
            <legend style="border: 2px solid salmon">
              <div class="my-3">
                <input type="password" class="form-control" />
              </div>
            </legend>
          </fieldset>
          <button type="submit" class="btn btn-primary">전송</button>
          <button type="button" class="btn btn-danger" id="close">닫기</button>
        </form>

<input>태그

input 태그에 자주 사용되는 속성으로는

type, readonly, maxlength 등이 있다

 

<input>태그 속성	설명
type	text, radio, checkbox, password, button, hidden, fileupload, submit, reset 등 input 태그의 형식(모양)을 다양하게 변경 할 수 있다
name	태그 이름을 지정 할 수 있다
maxlength	태그를 읽기전용으로 전환 할 수 있다
required	해당 태그가 필수태그로 지정하고 입력하지 않았을 경우, submit(전송)버튼을 눌르면 에러 메세지가 출력된다.
autofocus	웹 페이지가 로딩되면 이 속성을 지정한 태그로 자동 선택(포커스)이 된다.
placeholder	태그에 입력할 값에 대한 힌트를 준다(*(예)비밀번호 조건)
pattern	정규표현식을 사용해서 특정 범위 내 유효한 값을 입력 받을 때 사용한다         주민번호 :         <input           type="text"           name="security_number"           pattern="\d{6}\-\d{7}"           title="123456-1234567 형식으로 입력해주세요"         />

 

목록 태그 <select>, <optgroup> ,<option>

 

태그	설명
<select>	항목을 선택 할 수 있는 태그 [속성] size : 표시할 항목 수의 갯수를 설정 할 수 있다 multiple : 다중 선택을 허용 할 것인지 지정하는 속성이다
<optgroup>	<select>의 하위태그, 태그 안에서 목록들을 그룹화 해준다. label속성을 사용해서 그룹 이름을 지정 할 수 있다.
<option>	<select>의 하위태그, <optgroup>태그 하위에 있는 목록을 나타내는 태그이다.

 <form action = "#" accept-charset="utf-8" name = "person_info" method = "get"> 
            <fieldset style = "width:250">
                <legend>개인 정보 입력</legend>
                    지역선택 (size, multiple속성 추가)<br>
                    <select name = "city2" size = "5" multiple>
                            <option value = "seongnam-si">성남시</option>
                            <option value = "suwon-si">수원시</option>
                            <option value = "yongin-si">용인시</option>
                            <option value = "anyang-si">안양시</option>
                            <option value = "gwacheon-si">과천시</option>
                            <option value = "hanam-si">과천시</option>  
                    </select>
                    <br><br>
                    지역선택 (optgroup 태그 포함)<br>
                    <select name = "city1">
                        <optgroup label = "서울">
                            <option value = "songpa-gu">송파구</option>
                            <option value = "gangnam-gu">강남구</option>
                            <option value = "seocho-gu">서초구</option>
                            <option value = "junggu-gu">중구</option>
                        </optgroup>

                         <optgroup label = "경기도">
                            <option value = "seongnam-si">성남시</option>
                            <option value = "suwon-si">수원시</option>
                            <option value = "yongin-si">용인시</option>
                            <option value = "anyang-si">안양시</option>
                        </optgroup>         
                    </select>
                    <br><br>
                    <input type = "submit" value = "submit"/>
                    <input type = "reset" value = "reset"/><br><br>
            </fieldset> 
        </form>

 

여러 줄 글 상자 <textarea>

 

여러줄을 입력 받을 수 있는 태그,속성 값으로는 rows, cols가 있다

rows는 세로로 입력 받을 수 있는 줄의 갯수, cols는 가로로 입력 받을 수 있는 글의 갯수를 지정해 줄 수 있다.

 

 

 

참고:

https://www.nextree.co.kr/p8428/

HTML : 폼(form) 이해