<form> 태그, 폼태그 안에 있는 요소들 간단요약

폼태그

: 웹페이지의 정보를 다른 페이지로 전송하는 역할

(button, fieldset, input, label, option, optgroup, select, textarea 를 포함 할 수있다.)

 

속성

- action : 폼 내부에 데이터를 보낼 URL

- autocomplete : 자동완성 (on/off)

- enctype :  폼 데이터가 서버로 제출될 때 해당 데이터가 인코딩 되는 방법을 명시,

form 태그의 method 속성이 post 일때만 사용할 수있다. (application/x-www-form-urlencodedmultipart/

form-datatext/plain)

- method : (get/post) 폼 데이터가 서버로 제출 될 때 사용 되는 http 메소드 명시

- name : form 요소의 이름을 명시

- novalidate : 폼데이터가 서보로 제출될 때 해당 데이터의 유효성을 검사하지 않음을 명시

- target : 폼 데이터를 서볼 제출한 후 받는 응답이 열릴 위치를 명시

- accept-charset :  폼 데이터가 서버로 제출 될 때 사용되는 문자인코딩 방식을 명시

 

<form action="testurl" method="get" > </form>

폼태그 안에 있는 요소 간단요약

1. 텍스트 입력

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

2. 비밀번호 입력 : 입력받은 내용이 별표로 표시됨

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

3. 라디오버튼 : 같은 name 으로 묶임

<input type="radio" name="radio1" value="선택 1" cheked>선택1<br>

<input type="radio" name="radio1" value="선택2">선택2<br>

4. 체크박스 : 같은 name으로 묶임

<input type="checkbox" name="check1" value="선택1" checked>선택1<br>

<input type="checkbox" name="check1" value="선택2" disabled>선택2<br>

<input type="checkbox" name="check1" value="선택3" >선택3<br>

5. 파일 선택 : accept 속성을 이용하여 입력 받을 수있는 파일의 확장자 및 종류를 명시 할 수 있음

<input type="file" name="upload1" accept="image/*">

6. 선택 입력

<select name = "slectlist">

<option value="선택1">

<option value="선택2">

<option value="선택3">

</select>

7. 문장입력

<textarea name="message" rows="10" cols="15"> 텍스트를입력하세요

</textarea>

8. 버튼

<button type="button" onclick="sendFunction();">

기능1체험하기

</button>

9. 전송버튼 : submit

<input> 태그, <button> 태그에 type 속성값을 submit 으로 설정하면,

사용자로 입력 받은 데이터를 서버의 폼 핸들러로 제출 하는 버튼을 만들 수 있음.

submit 버튼을 누르면 action 의 url로 이동함

10. 필드셋 (fieldset)

: form 요소와 관련된 데이터들을 하나로 묶어주는 역할

legend 요소는 fieldset 요소안에서만 사용 할 수있으며 fieldset 요소의 제목을 나타냄

<form >

    <fieldset>

      <legend>보내려는 데이터</legend>

      <input type="text" name="send1"><br>

      <input type="text" name="sendvalue2"><br>

    </fieldset>

</form>