TIL) HTML/CSS - form & input

    <form>
      <!-- 일반 글자 입력할 때 -->
      <input type="text" value="초깃값" placeholder="배경글자" />
      <!-- 패스워드 입력할 때 -->
      <input type="password" name="이름" />
      <!-- 이메일 입력할 때 -->
      <input type="email" />
      <!-- 날짜 입력할 때 -->
      <input type="date" />
      <!-- 체크박스 입력할 때 -->
      <input type="check" />
      <!-- 날짜 입력할 때 -->
      <input type="radio" />
      <!-- range 기능 -->
      <input type="range" />
    </form>

• <input> 태그의 value 속성은 <input> 요소의 초깃값(value)을 명시한다.
• placeholder 속성은 input 박스 안에 적힌 글자를 의미한다.
• name 속성은 서버 개발시에 필요하다.

<select>
	<option></option>
    <option></option>
</select>

• <select>태그의 option 속성은 옵션 기능을 만들 수 있다.

<form>
	<input type="submit">
    <button type="submit">전송</button>
</form>

• submit을 적으면 전송할 수 있다.

/* css */
input[type=text] {
	padding: 10px;
    font-size: 20px;
    border: 1px solid black;
    border-radius: 5px;
}

• input[속성명=속성값] : input의 속성명이 속성값인 요소만 찾아서 스타일을 줄 수 있다. 폼에서 유용하게 사용한다.

         <div class="w-40">
            <input id="sub" type="checkbox" name="checkbox" />
            <label for="sub">Subscribe</label>
            <button type="submit" name="submit">SEND</button>
          </div>

• label을 누르면 input 태그도 같이 누른 것처럼 적용된다.

이벤트 핸들러

필요할 때마다 검색해서 쓰자!

<input onChange={() => { 코드 }}  />

• <input>에 뭔가 입력했을 때 코드 실행하고 싶을 때 onChange, onInput을 쓴다.

<input onMouseOver={() => { 코드 }} />

• <input>에 마우스를 가져다 댔을 때 코드가 실행되는 코드. onMouseOver

<input onScroll={() => { 코드 }} />

• <input>에 스크롤바가 있을 때 스크롤바 조작할 때마다 코드 실행. onScroll