2019.04.15 Python and Django Full Stack Web Developer Bootcamp
(스스로 이해한 것을 바탕으로 정리한 것으로 오류가 있을 수 있습니다)
# 질문에 답하기
- html에서 테이블 만드는 tag
form
- class : by css 연결고리
- action : 특정 사이트를 링크 해놓으면 submit을 하였을 때 해당 링크로 이동
- method : javascript와 결합하여 행동
- form은 입력된 데이터를 한번에 서버로 전송한다.
- 따라서 함께 input 받아서 전송할 데이터들은 form으로 묶는다.
input (무언가를 쓸 수 있게 해준다.)
- type : text / email / password / submit / color / radio
- 이메일타임은 @ 혹은 .com을 쓸 수 있다.
- 자동적으로 이메일 타입인지 확인할 수 있다.
- password는 자동적으로 별표처리가 된다.
- submit은 보낼 수 있게 해준다.
- text를 해서 쓰는 것만큼 크기를
- radio는 동그라미 버튼이 나온다.
- radio에서도 value값을 넣어줘야지 이게 값이 나중에 전달되어 쓸 수 있다.
- loc 라고 해놓으면 radio 박스에서 하나만 선택할 수 있게 해준다
- 단 name에 같은 loc 라고 해주어야지 서로 인식할 수 있다.
- name : 딱히 표현은 되지 않으나 나중에 name을 value와 함께 전달한다.
- 나중에 참조할 때 쓸 수 있다.
- value : 초기값
- 자동적으로 처음에 값을 넣어준다.
- 사용자가 값을 바꿀 수 있다.
- placeholder로 투명하게 보이게 할 수도 있다.
- required를 통해 꼭 넣어야 하는 것을 설정해줄 수 있다.
- 정말 잘 정리해놓은 자료: HTML : 폼(form) 이해
label tag
input에 email을 넣고 submit을 누르면 주소창이
- file:///Users/bu-k/Desktop/Django2.0-Python-Full-Stack-Web-Developer-NEWMaster/02-HTML_Level_Two/input_practice.html?useremail=gang0406%40naver.com 이렇게 변한다.
input에 text를 넣고 submit을 하면
- file:///Users/bu-k/Desktop/Django2.0-Python-Full-Stack-Web-Developer-NEWMaster/02-HTML_Level_Two/input_practice.html?userinput=mystuff 제일 마지막이 이렇게 변한다.
submit버튼을 눌렀을 때 무언가 엑션을 주고 싶을 때
- form action = " 주소 " method = "get" 근데 딱히 method는 적지 않아도 가긴하네?
- https://fabl1106.github.io/?userinput=HELLO+WORLD
- 다른 페이지로 가면서 내가 입력한 것을 가지고 있다.
label
- 텍스트와 문구를 한개로 라벨 해준다.
- 텍스트박스와 문구가 한줄에 같이 생기게 해준다.
- label for = "특정 문구" 를 해놓으면 input에서 id를 통해 연결 시킬 수 있다.
- 활용 방법
- <label for ="hello"> 이메일을 입력해주세요</label>
- <input id = "hello" type = "email" name="" placeholder="@gmail.com" required>
select
- 무언가를 순차적으로 고르게 하는 것을 만들 수 있다.
- option와 함께 사용
textarea
- 문장으로 된 feedback을 적을 수 있도록 해준다.
Test 03
![test03](https://user-images.githubusercontent.com/46436843/56135105-fcc03c00-5fca-11e9-8db2-3ab4f1e0f4f5.png)
구현
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Assessment Test HTML LEVEL</title>
</head>
<body>
<h1>Course Sign Up Page</h1>
<p>please Note : Frist, Last Name, Password, and Email are required</p>
<form class="" action="/Users/bu-k/Desktop/Django2.0-Python-Full-Stack-Web-Developer-NEWMaster/02-HTML_Level_Two/thankyou.html" method="get">
<label for="First">First Name:</label>
<input id="First" type="text" name="" placeholder="First Name" required>
<label for="Last">Last Name:</label>
<input id="Last" type="text" name="" placeholder="Last Name" required>
<p>
<label for="Email">Email:</label>
<input id ="Email" type="email" name="" placeholder="name@email.com" required>
<label for="Password">Password</label>
<input id = "Password" type="password" name="" value="" required>
</p>
<p>Are you over the age of 18?</p>
<label for="Yes">Yes:</label>
<input id = "Yes" type="radio" name="loc" value="Yes">
<label for="No">No:</label>
<input id = "No" type="radio" name="loc" value="No">
<p>Do you have a Credit Card or PayPal?</p>
<select class="" name="">
<option value="Credit">Credit Card</option>
<option value="PayPal">PayPal</option>
</select>
<p>Do you have any Feedback?</p>
<textarea name="name" rows="8" cols="80"></textarea>
<p><input type="submit" name="" value="Submit Feedback"></p>
</form>
</body>
</html>
- 위에서는 아직 채워넣지 않았지만 각각의 tag에 대해 name 부분과 value 부분은 중요하다. name과 value가 합쳐져서 데이터베이스로 넘어간다.
'HTML' 카테고리의 다른 글
HTML 06. Server만들기(POST 및 CGI) (0) | 2020.01.16 |
---|---|
HTML 05. Server만들기(get) (0) | 2020.01.16 |
HTML 04. clone page+Bootstrap (0) | 2020.01.16 |
HTML 02. table 만들기 (0) | 2020.01.16 |
HTML 01. 기본 tag들 (0) | 2020.01.16 |