본문 바로가기
Knowledge/HTML & CSS

[HTML-3] 입력요소

by w.developer 2023. 5. 30.

1. 입력요소

 

1-1. input

 

사용자로부터 값을 입력받을 수 있는 대화형 컨트롤(필드),

기본적으로 인라인 요소이며, 단일태그이다.

name 식별자를 추가하면 각 입력항목을 이름별로 구분할 수 있다.

<input type="text" name="입력하는곳 1번지">

 

type 값에 따라 입력 요소나 형태가 달라진다.

주로 사용하는 type은 button,checkbox,date 등등 

주가적인 type정보는 https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input

 

<input>: 입력 요소 - HTML: Hypertext Markup Language | MDN

HTML <input> 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다. 사용자 에이전트에 따라서 다양한 종류의 입력 데이터 유형과 컨트롤 위젯이 존재합니다. 입

developer.mozilla.org

 

 

1-2. select

 

다수의 옵션을 포함할 수 있는 선택메뉴이다.

안쪽에 옵션을 줄 수있다.

한눈에 다 보이는 multiple 속성도 추가가능하다

출처. 유노코딩

1-3. textarea

 

여러 줄의 일반 텍스트를 입력할 수 있는 입력요소이다.

input과 마찬가지로 name을 추가할 수 있다.

rows="10" cols="10" 등의 요소를 추가해서 칸 수를 조정할 수 있다.

출처. 유노코딩

 

 

2. form 

사용자의 입력요소를 받아서 데이터를 서버로 전송해준다.

 

2-1. 내용 제출

사용자가 입력한 데이터를 서버로 보내기 위해 사용하는 태그이다.

form의 내용(입력값)을 제출하기 위해서, input 태그의 sub 타입도 사용가능하다.

출처. 유노코딩

2-2. 속성

 

action : 입력값을 전송할 서버의 url

method : 클라이언트가 입력한 데이터를 어떤 식으로 전송할지 (GET , POST)

2-3. GET 과 POST

 

GET

: 서버에 요청을 보내서 응답을 받아낸다.

즉, 가져오는 성격의 요청

 

POST

:  서버에 요청을 보내어 작업을 수행한다. 추가/수정/삭제 한 후에 응답을 받아낸다.

즉, 서버 정보를 조작한다.

 

'Knowledge > HTML & CSS' 카테고리의 다른 글

[CSS-4] float, clear  (0) 2023.05.30
[CSS-3] 박스모델 (Box-model)  (0) 2023.05.30
[HTML-4] 메타 태그, 뷰포트  (0) 2023.05.30
[HTML-2] 속성 링크 목록  (0) 2023.05.30
[HTML-1] 기본 태그  (0) 2023.05.30