IT/웹개발 (100일 도전)

Udemy section 10 (27일) - 양식요소, 라벨, 다양한 입력유형, 이메일,숫자, 비밀번호/날짜/유형 이해하기, 라디오버튼

김숭늉이 2023. 3. 5. 20:28
728x90

 

  1. 라벨 추가하기!
      label for은 id 값을 향한다.
 
<body>
    <form action="/" method="GET">
        <label for="user-name">Your name</label>
        <input type="text" name="user-name" id="user-name"/>   -> name 은 개발자 양식에서만 보임!
        <button>Submit</button>
    </form>
  </body>

 

 

둘 사이를 연결 시키게 되면 입력이 포커싱 된다.

 

 

2. 브라우저 디폴트 스타일을 상속받는 경우?  

   --->브라우저 상속보다 더 우선 적용됨!  inherit를 사용!

 

button {
    display: block;
    font: normal 1rem 'Robotro', san sarif;
}
 

--------------------------------------------------------------

button {
    display: block;
    font: inherit
}

 

***  button과 input에서 주로 사용

input {
    width: 100%;
    display: block;
    margin-bottom: 1rem;
    box-sizing: border-box;
    font: inherit
}

button {
    display: block;
    font: inherit
}

 

 

4. input 포커싱

    ㄴ input:focus 와 같이 의사자로 선택함!

input:focus {
    background-color: rgb(219, 190, 253);
    color: rgb(32, 5, 63);
    border-color: rgb(32, 5, 63);
}

 

 

 

5. 유용한 입력 type 체크체크 !

    ex) type email인 경우 이메일 입력에 적합한 키보드가 나옴!

 

 

 

 

6. 라디오 버튼

   value 속성은 사용자가 입력한 값으로 생각해주면 됨 (머신이 읽을수 있는 value)

   ㄴ value는 나중에 컴퓨터가 추출할수있는 속성이됨 

   ㄴ 라디오 버튼에는 필요없음 

   ㄴ name을 동일하게 설정해야함 ! 

   ㄴ 가능하다면 div로 스타일링 추가!

 

      <hr/>
      <h2>How should we verify your account?</h2>
      <div class="form-control-inline">
        <input
          type="radio"
          name="verify"
          id="verify-text-message"
          value="text-message"
        />
        <label for="verify-text-message">Via text message (SMS)</label>
      </div>
      <div class="form-control-inline">
        <input type="radio" name="verify" id="verify-phone" value="phone" />
        <label for="verify-phone">Via a phone call</label>
      </div>
      <div class="form-control-inline">
        <input type="radio" name="verify" id="verify-email" value="email" />
        <label for="verify-email">Via an email</label>
      </div>

 

아래와 같이 css에 스타일 적용 (flex로 설정)

 

.form-control-inline {
    display: flex;
}

.form-control-inline input {
    width: auto;
    margin-right: 0.5rem;
}

 

7. 드롭다운

      <label for="favorite-color">Your favorite color</label>
      <select  id="favorite-color">
        <option>Blue</option>
        <option>Black</option>
        <option>Red</option>
      </select>

 

728x90
반응형