HTML - Form, Input 태그 정리

191218 수업 내용 정리

---

<form> 

   - 외부에서 값을 입력 받아 전송할 때 사용(->DB)
     ▷속성 - method : 데이터 전송 방식 지정
                 1) get : 데이터가 url창에 노출되면서 전송 ex) 사이트 접속, 검색어 입력
                 2) post : 전달되는 값이 url창에 노출되지 않음, 보안이 get방식보다 좋음

                            ex) 회원가입, 로그인, 파일 첨부된 메일
                              => 주로 post방식을 사용함, default = get
                  - action : 누구에게 값을 전달해줄 것인가에 대한 속성
            ※ - name : 할당된 이름으로 각각의 입력받은 값을 구분 => '변수'로 사용

 

---

<input>

   - 특정 타입의 박스를 추가해주는 태그, form태그 안에 쓰임, 빈 태그
     ▷속성 type = "text" : 텍스트를 입력할 수 있는 박스
                                "password" : 텍스트를 입력하면 가려서 출력
                                "radio" : 둘 중에 하나의 값만 선택 가능
                                "checkbox" : 다중선택 가능
                                  → checked="checked" 속성을 주면 해당 박스를 미리 선택된 상태로 만들 수 있음
                                "file" : 파일 첨부 형식을 만들어 줌
                                "button" : 데이터를 수동으로 처리하며, 추후에 JS를 이용해주어야 실용적
                                  → value=""로 버튼에 출력되는 문자를 지정해줄 수 있음
                                 ※버튼을 눌렀을 때 어떤 버튼을 눌렀는지 컴퓨터는 어떻게 구분하는가? 
                                  → name, id 값으로 구분함, 요즘엔 id를 많이 씀
                                 "submit" : 입력받은 데이터를 자동으로 데이터베이스로 전송해 주는 버튼
                                 "reset" : 입력한 값들을 전부 삭제시키는 버튼

      <select> : 정해져 있는 값들 중에서 하나를 선택할 수 있는 목록 상자(콤보 박스)

      <option> : <select> 안에 사용되며, 각 항목을 지정하는 태그,
                            ▷속성 selected : 하나의 값을 미리 선택되어 있게 함 
      <textarea> : 여러줄의 텍스트를 입력 받을 때 사용

                              ▷속성 cols : 가로 텍스트 길이

                                          rows : 세로 텍스트 길이

 

---

 

<input> 속성 in HTML5

   ▷속성 type="email" : 이메일 전용, 이메일 형식을 취하는 지 확인함
                            "url" : 사이트 주소 입력
                            "date" : 날짜 입력
                            "time" : 시간
                            "datetime" : 날짜와 시간을 입력할 수 있지만 아직 사용가능한 브라우저는 없음
                            "number" : 텍스트박스에 숫자만 들어갈 수 있게 해줌  
                                                   ▷속성 min : 최소값
                                                                 max : 최댓값
                                                                 step : "증가/감소" -> 스텝 버튼 생성
                                                                 value : "현재 숫자 값"
                            "range" : 지정한 수의 범위를 트랩바로 표시해줌
                            "search" : 검색창에 사용하며, 입려값 취소시 X 클릭 (X는 문자열 입력시 생성)
   ▷또 다른 속성 placeholder : 대화상자에 "툴팁문자열 표시" (미리보기 기능), 글자를 쓰면 사라짐
                               required : 유효성 검사, required가 부여된 박스에 값을 입력하지 않으면 페이지를 넘어갈 수 없음
                               autofocus : 자동으로 커서 입력, autofocus="autofocus"(생략가능)
   

   <datalist> : 내부에 <option>을 사용해서 데이터 목록을 만듦,
                            <datalist id="dtl">에 아이디를 부여해서 <input type="text" list="dtl">에 바인딩하면

                             텍스트박스를 목록상자처럼 만들 수 있음
   <progress> : 백분율 표시, min, max, value 등의 속성을 사용할 수 있음
   <meter> : <progress>보다 매끄러운 백분율을 나타낼 수 있음 

---

form태그와 input태그 안에는 굉장히 다양한 속성이 있기 때문에 반복 숙달할 필요가 있습니다.

예제를 같이 올리면 좋을텐데 양이 많아서 시간적 여유가 없네요...ㅠㅠ