Html form 태그

폼의 기본형식 

<form action = "폼을 전송할 URL 지정 api 주소" method = "get" or "post>

  <input type = "text" maxlength="13" required disabled value = ">

</form>

 

<form> 태그 속성

action : 폼을 전송할 URL 지정 api 주소

name : 전송될 데이터의 이름

accept-charset : 폼 전송에 사용할 문자 인코딩을 지정

target: action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정

method (디폴트 값 = get) : 서버로 데이터를 전송하는 방식

     get : 데이터가 주소입력란에 표시 따라서 보안유지 x , 간단한 데이터 전송

     post : http 헤더에 숨겨져 서버로 전송 보안성 우수, 크기 무제한

 

 

<fieldset> : 여러개의 폼 그룹화시켜 좀 더 구조적으로 만들때 사용

<legent> : fieldset의 컨트롤 들이 어떠한 성격의 콘텐츠인지 제목 형식으로 알려줌,

               fieldset 요소의 바로 뒤에 한번만 작성하는 필수요소

 

   

 

<label> : 폼양식에 이름을 붙여줌 속성은 for

     *명시적 레이블 : label의 for 값 = 폼 컨트롤 요소의 id값

                 ex) 명시적 레이블의 예시 

     *암묵적 레이블 : lavel 요소에 폼 컨트롤 포함시키기 <label> 제목 <폼의 컨트롤요소></label>

                 ex) 암묵적 레이블의 예시             

  

<input> 의 type 

1. text <input type = "text"> 

2. password <input type="password"> : ···· or ***으로 입력 됨

3. radio : 한개만 선택 가능한 라디오 버튼, 선택해제 힘듦, name 값 모두 같아야 함!

4. checkbox : 복수 선택 가능한 체크  

  * radio와 checkbox의

       name : 체크박스의 이름, 같은 분류의 체크박스는 같은 이름으로 지정

       value : 선택 항목들이 가지는 고유한 값. 서버로 전송되는 값이라 radio와 checkbox에선 필수 

     ex) radio와 checkbox의 사용법

  

5. selcet : 드랍 다운 리스트(DropDownList), 라디오처럼 한개만 선택가능, multiple 속성 사용하면 다중선택가능

  * select의 주요속성

       name : 셀렉트의 메뉴 이름 지정

       option : 셀렉트 메뉴의 항목을 정의하는 요소 select 요소에는 한개 이상의 option 요소 반드시 포함!

       size : 표시 줄 수 지정

    *select의 option의 주요속성

       value : 선택 항목들이 가지는 고유한 값. 서버로 전송되는 값이라 radio와 checkbox처럼 select에서도 필수

       selected :  선택된 상태, 초기값 선택

  ex) select의 사용법 

  

   +<optgroup> : select 에서 그룹을 만들때 사용한다.

    ex) select의 <optgroup> 사용법  optgroup의 label은 표시될 옵션의 제목

6. textarea : 여러줄로 된 텍스트 필드를 생성하는 인라인 요소이다. 한줄이면 input type="text" 사용하기

  ex textarea 사용하기)

     <textarea id = "area" name="컨트롤의이름" cols="가로크기" rows="세로크기"></textarea>

7. submit <input type="submit"> submit에 value 속성 추가하면 버튼속 텍스트 입력됨

8. reset <input type="reset">: 입력내용 모두 초기화 버튼

9. button <input type="button"> : 버튼

    *button의 주요속성

       type="submit"

       type="reset"

       type="button"

10. email <input type="email"> : @포함 안되면 처리 x

11. url <input type = "url"> 

12. number <input type = "number" min="12"> *여기서 min은 minlength랑 다름 

13.  file <input type = "file" accept=".png,.jpg"> :파일 업로드

                                                             *accept 는 허용되는 파일 형식 +"image/*" 이면 이미지 파일 모두 허용

 

 

<input>의 기본속성

1. name : 컨트롤의 이름 (서버에서 처리할 데이터의 컨트롤에는 name 속성 필수)

2. value : 컨트롤의 값

    value 속성은 <input> 요소의 type 속성값에 따라 다른 용도로 사용

          - “button”, “reset”, “submit” : 버튼 내의 텍스트를 정의함

          - “hidden”, “password”, “text” : 입력 필드의 초깃값을 정의함

          -  “checkbox”, “image”, “radio” : 해당 입력 필드를 선택 시 서버로 제출되는 값을 정의함

                 ex) 용도의 따른 value 사용 예시

3. size : text, password 의 가로크기 

          사이즈를 지정하지 않으면 컨트롤의 폭은 브라우저에 따라 달라진다. 보통은 스타일에서 설정함!

4. maxlength ↔ minlength : 최대, 최소 입력 문자수 지정, 동시사용 가능 

5. max ↔ min : 최대값, 최소값 지정, 동시 사용 가능  

6. checked : 체크박스, 라디오버튼의 초기 선택

7. disabled : 컨트롤의 포커스, 선택, 변경 등의 조작 불가능하게하고  서버로 데이터 전송 X

8. readonly : 컨트롤의 내용은 변경되지 않게 하지만 서버로 데이터 전송 O

9. placeholder : 입력내용의 안내 ex) placeholder="숫자로만 입력해주세요"

10. autofocus : 자동으로 포커스를 위치시킴, 폼 요소당 한개만 준비시킬 수 있음!

11. autocomplete : 자동완성 기능의 컨트롤 ex)autocomplete="off" or "on"

12. required : 필수 입력사항이라 없으면 submit 불가능!