HTML 훈련 - (10) Input Group

Input Group

 

 

Input Group

 

 

<form> 연습하기!

 

마크업 부분 나누기.

 

Input Group - 사용할 element

 

 

 

1. h1과 paragraph

<h1>
        Manage Subscriptions
</h1>

<p>
        You can follow the discussion on @kimbug without to leave a comment. Cool, huh? <br>
        Just enter your email address in the form here below and you are all set
</p>

 

 

2. input 태그와 button

 

<form action="" method="GET">
     <input type="email" placeholder="Your Email">
     <button type="submit">Subscribe</button>
</form>

button type = submit 을 이용하여 폼을 제출해야하므로,

form 으로 반드시 감싸줘야한다.

 

method는 GET 을 사용한다.

 

https://mywebproject.tistory.com/73

etc) HTTP - GET 방식 vs POST 방식

form의 get과 post방식은

http프로토콜을 이용할때의 method인데, 그 차이점은 위 포스팅에서 정리해두었다.

 

 

---

GET 

정보 조회

서버에서 어떤 데이터를 가져와 조회하는 메서드.

Select.

 

URL의 끝에 ‘?’ 가 붙고, 요청정보가 (key=value) 형태의 쌍을 이루어 서버로 전송됨.

요청정보가 여러개일 경우 ‘&’ 로 구분.

 

POST

서버의 값, 상태 변경

Insert, Update, Delete

 

- 대용량의 값을 전송하기에 적합하다. (그러나 용량 제한은 有)

- GET 방식보다 보안이 뛰어나다. 

- GET 방식보다 속도는 느림.

 

GET	POST
key=value 쌍. URL 끝에 ?가 붙음. 정보 조회 (select)	대용량의 값 전송. 보안 good / 속도 느림 정보 수정(insert, update, delete)

---

 

 

index.html

<h1>
    Manage Subscriptions
</h1>

<p>
    You can follow the discussion on @kimbug without to leave a comment. Cool, huh? <br>
    Just enter your email address in the form here below and you are all set
</p>

<form action="" method="GET">
    <input type="email" placeholder="Your Email">
    <button type="submit">Subscribe</button>
</form>

 

 

 

 

** style.css 적용

 

<link rel="stylesheet" href="./style.css">

 

 

 

 

결과

 

input type=email은 email형식을 입력해야 submit 가능함!

 

 

 

 

 

 

style.css 의 코드 리뷰는 아래 포스팅에서.

 

https://mywebproject.tistory.com/117

html_pr10) style.css Code Review

 

 

---

 

 

** 참고

 

💡 href속성과 src속성의 차이는?

https://mywebproject.tistory.com/121

html) href 속성 vs src 속성 (+ css url)

 

href=" "

• <link>태그로 외부 CSS파일을 불러올때 사용
• <a> 태그에 url을 입력할 때 사용

 

 

src=" "

• <script>로 외부 js파일을 불러올 때 사용
• <img>태그에 url을 입력할 때 사용

 

 

 

 

---

REFERENCE (style.css)

https://github.com/rohjs/bugless-101/tree/master/html-practice/09-github-dropdown-menu

 

 

김버그의 HTML&CSS는 재밌다 - 구름EDU

 

강의내용 (X)
github 코드 위주로 작성하였습니다.

추후 비공개 처리 예정,