[chap.7] html 각종 form 만들기
1. form (아이디, 패스워드 입력창 만들기)
html form이란
user가 다양한 정보를 입력하고, 그 내용을 서버로 전달하기 위해 사용되는 태그이다.
로그인, 회원가입, 견적서 등에 쓰인다.
바로 예시를 보자
먼저 <form></form>을 만들어 준다
<form action="!@#">에서 action에 들어갈 주소가 바로 input된 정보들이 보내질 서버이다.
form 태그를 만들었으면 그 안에 <input>도 넣어준다. closing tag는 넣지 않는다.
When we create an <input> element with type="text", it renders a text field that users can type into.
Note that the default value of type is "text".
It’s also important that we include a name attribute for the <input> — without the name attribute, information in the <input> won’t be sent when the <form> is submitted.
위의 예시에선 name의 value를 id로 지정해주었다. 입력된 정보가 id에 해당된다는 것이다.
그 뒤에 나오는 value attribute는 렌더링된 화면에서 보이는 것과 같이 user가 처음 페이지를 열었을 때 보이는 pre-filled text이다.
좀 더 나아가 아이디 패스워드 입력창을 만들어보자
user들이 알아볼 수 있게 ID와 PASSWORD 텍스트도 넣었다.
<p>태그로 단락을 나눠 깔끔하고 보기쉽게 정리하였다.
ID입력창엔 type="text"로 지정했지만 PASSWORD입력창엔 type="password"로 입력했다.
이 경우 보이는 것처럼 입력된 텍스트가 비공개로 전환된다.
2. Label
앞서, 로그인창을 만들 때 아이디패스워드창에 임의로
ID: , PASSWORD: 라는 이름표를 달아주었다.
그러나 이건 야매고 공식적으로 무엇의 이름표임을 선언하는 element가 있다.
그것이 lable tag이다.
먼저 나타내고자 하는 텍스트를 label tag로 감싸준다.
이렇게만 되면 무엇에 대한 label인지 알 수 없다.
그래서 타겟이 되는 입력창에 id attribute를 부여하여 label과 연결시켜 줄 것이다.
lable과 id를 연결해줄 땐 for=을 쓴다.
보기엔 다른 게 없지만 미묘한 차이를 말하자면
이렇게 label을 지정해주면 입력칸이 아니라 연결된 이름표를 클릭해도 입력창으로 커서가 간다는 점!
만약 id attribute를 쓰는 게 귀찮으면 위와같이 아예 전체를 label로 묶어버리는 방법도 있다.
3. Number input
바로~ 예시를 보자
tpye="number"을 입력하면 입력창과 스핀버튼이 생긴다
min, max은 말그대로 최소값 최대값, step은 스핀버튼을 눌렀을 때의 증감폭이다
즉 입력가능한 값은 30 35 40 ... 100
4. Range input(slider)
span 태그는 아직 잘 모르겠다.. <span>Rare <input @#$> Well-Done</span> 으로 해도 되지 않나 싶은데 일단은 패스 계속 부딪혀보면서 이해해보도록 하겠다.
<input type="range">는 위와같이 슬라이더가 나타난다.
Smaller step values will make the slider more fluidly, whereas larger step values will make the slider move more noticeably.
5. Checkbox input
다중선택이 가능한 체크박스!
name = value 로 서버로 전송되는 거니까 일단 세가지 모두 name=topping
value 반드시 입력해줘야한다. user들은 텍스트를 입력하는 게 아닌 체크박스로 선택만 하는 거니까.
6. Radio input
Radio buttons were named after the physical buttons used on older radios to select preset stations1[2] – when one of the buttons was pressed, other buttons would pop out, leaving the pressed button the only button in the "pushed in" position. 다중선택이 불가한 radio button은 여기서 이름이 유래되었다
7. Dropdown list
한정된 공간 내에서 다양한 선택지를 보이고 보이고 싶을 때 유용!
만약 다중선택을 제공하고 싶다면 아래와 같은 방법이 있다.
그러나 이경우엔 보통 체크박스가 더 낫겠지?
7. Datalist input
dropdown list 처럼 이미 선택할 수 있는 데이터값을 제공하면서도 user들이 직접 입력도 할 수 있게 만든 input
name과 value값은 잊지말고 꼭 입력해주기. '네이버''구글''야후' 등 user들에게 보여주기 위한 text는 위와같이 label을 이용하면 된다.
중요한 것은 <input list="abc"> <datalist id="abc">를 정확히 설정해야한다는 점! 저게 둘의 연결고리니까
8. Textarea element
앞서 배웠던 text field는 한줄로만 입력이 가능했다. 더 많은 텍스트(예를 들면 블로그포스트처럼)를 입력하기 위한 field를 만들어보자!
<textarea></textarea> 사이에 입력되는 값이 default value가 된다. text field 오른쪽 아래 모서리로 박스 크기를 조절할 수 있다.
* 여기서 placeholder attribute를 쓰면
<textarea input placeholder="share your memories"></textarea>
value와는 다르게 글자를 입력하면 자동으로 텍스트가 사라진다.
<input
9. Submit Form
이제 입력한 정보들을 어디론가 보내야 겠죠?
4와 5번 사이엔 지금껏 우리가 배웠던(입력한) information들이 생략되어있다.
value값을 따로 설정하지 않으면 기본값으로 submit가 나타나게 된다.
생성된 Send 버튼을 누르면 입력된 정보들은 page2.html로 넘어가게 된다.
chap.4 정리
- The purpose of a <form> is to allow users to input information and send it.
- The <form>‘s action attribute determines where the form’s information goes.
- The <form>‘s method attribute determines how the information is sent and processed.
<form action="!@#" method="get"> 의 형태로 작성하게 되는데 method에는 get과 post 두가지 방식이 있다.
user가 작성한 form을 submit하면 데이터를 전송하게 되는데 get으로 전송하게 되면 URL에 개인 정보가 다 노출이 된다. post로 설정시 url엔 입력한 어떤 정보도 뜨지 않는다. 즉, 데이터 전송 방법의 차이이다. get은 URL로, post는 노출되지 않는 다른 방법으로 서버에 데이터를 전달하게 된다. method를 입력 안 하면 get으로 자동설정된다.
- To add fields for users to input information we use the <input> element and set the type attribute to a field of our choosing:
- Setting type to "text" creates a single row field for text input.
- Setting type to "password" creates a single row field that censors text input.
- Setting type to "number" creates a single row field for number input.
- Setting type to "range" creates a slider to select from a range of numbers.
- Setting type to "checkbox" creates a single checkbox which can be paired with other checkboxes.
- Setting type to "radio" creates a radio button that can be paired with other radio buttons.
- Setting type to "list" will pair the <input> with a <datalist> element if the id of both are the same.
- Setting type to "submit" creates a submit button.
- A <select> element is populated with <option> elements and renders a dropdown list selection.
- A <datalist> element is populated with <option> elements and works with an <input> to search through choices.
- A <textarea> element is a text input field that has a customizable area.
- When a <form> is submitted, the name of the fields that accept input and the value of those fields are sent as name=value pairs.