FDS12_Markup_Summary

Web Cafe | Login section <form>

Login Form

form tag

: 상호작용하는 서식요소를 담음. action = “서버url” 필수 속성

fieldset

: 연관성 있는 서식요소를 grouping하고 legend로 역할/묶은 이유를 명시

로그인 및 관련 설정이 legend, 테두리진 부분이 fieldset

label and input

: <input id="uid">일 때 <label for="uid">로 input 정보에 라벨링

• 낭독기에서 input에 focus가면 label input이라고 읽어줌 (ex) 아이디 입력상자

• label 마우스 클릭시 input으로 focus 이동 > 접근성 좋아짐

• Section의 heading은 뒤에 -heading 으로 class 줄것임
• <button type="submit"(default)>시 <form action="server URL">로 정보 전송됨
• Formspree 이용해서 form test
• <input name="uid"> 줘야 input 값 id로 구분할 수 있음!

Form validation

• agent (= browser)에서 client 측에서 미리 검사할 수 있음
• input속성 : required

<div class="user-email">
    <label for="user-email">아이디</label><input type="email" id="user-email" name="uid" required placeholder="mail@mail.com">
</div>
<div class="user-pw">
    <label for="user-pw">비밀번호</label><input type="password" id="user-pw" name="upw" required placeholder="8자리 이상">
</div>

[chrome]

[Firefox]

FF에서는 agent style로 input도 길게 보임

• input : placeholder

  

  • label과 placeholder는 달라야한다.
  • Label은 이름표, placeholder는 실제 input값이 무엇이 들어와야할지를 명시

• input type : email

Form 요소 관련 유용한 사이트

1. CanIUse.com

CrossBrowsing 할 때 어떤 환경에서 지원이 되고 안 되는지 확인 가능

1. Web forms 2.0 demo

: form tag 관련 요소들 데모 볼 수 있음

---

Login Design

1. legend 안 보이게 미리 만들어놓은 hidden module 처리

크기 변경이 가능한 요소들

• <img>

• <input>

  > inline-block

  Box-shadow

Mozilla box-shadow

: Box-shadow는 box 크기에 영향을 주지 않는다! Margin 줄 때 그림자 고려해서 넣어야함

text-indent : 들여쓰기, (음수로 쓰면 내어쓰기)

button은 기본이 border-box

• button에 적용된 border, padding 등 기본 agent style이 있으니 반드시 reset하고 시작하기