김숭늉 마음대로

Udemy section 10 (26일) - input, button, POST/GET 본문

IT/웹개발 (100일 도전)

Udemy section 10 (26일) - input, button, POST/GET

김숭늉이 2023. 3. 5. 14:46
728x90

 

1. Web Forms (인풋폼 input form) 

 -> 사람들이 입력할수 있는 칸!

 

 

 

 

2. input은 void 요소 ! 마지막이 슬래쉬로 끝나게 됨!  // css상 width 설정!

  input과 button은 인라인-블록 요소!  // block으로 지정이 필요하면 display: block으로 요소를 지정해준다!

 
 
<body>
    <input type="text"/>
    <button>Submit</button>
</body>
 

 

 

 

3. form 요소를 추가!  (양식제출)   매우 중요

 ㄴ 시맨틱적 의미로 매우 중요하고 검색엔진과 보조공학장치들에게 입력양식이 시작할거라고 알려주는 역할! 

 

 

url 끝의 물음표 표시는 서버에 제출되었다는 의미

 

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Forms</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <form action="/user-data" method="POST">
        <input type="text" name="user-name"/>      
        <button>Submit</button>
    </form>
  </body>
</html>
 
4. form action은  요청이 보내져야하는 url 과의 통로를 지정하는것!

 

5. method는 전송 되어야하는 http 요청의 종류를 선택하게 한다!

   GET 브라우저에게 GET 요청을 보내면서 DATA를 가지고 옴!

   POST  브라우저에게 POST 요청을 보내면서 DATA를 SAVE하라는 요청을 보내게 됨!

     (관습적으로 GET/POST는 대문자로 작성한다)

 

 

 

6.    <form action="/" method="GET">

       ㄴ 메인을 가지고 오게됨!

 
728x90
반응형

'IT > 웹개발 (100일 도전)' 카테고리의 다른 글

Udemy section 10 (28일) - checkbox, textarea, 드롭다운  (0) 2023.03.07
Udemy section 10 (27일) - 양식요소, 라벨, 다양한 입력유형, 이메일,숫자, 비밀번호/날짜/유형 이해하기, 라디오버튼  (0) 2023.03.05
Udemy section 9 (25일) - CSS 사용자 정의 속성, CSS 변수, transform, transition, SVG  (0) 2023.03.05
Udemy section 9 (24일) - 타켓 선택자, 사이드바, CSS 디자인 팁  (0) 2023.03.02
Udemy section 8 (23일) - 미디어쿼리, 햄버거버튼, 사이드바  (0) 2023.02.28
'IT/웹개발 (100일 도전)' Related Articles more