[HTML][CSS] input 태그 -placeholder,value,checkbox,radio등

 input 태그

- 입력창, 버튼 만들 수 있다.

 

1. 정말 간단한 로그인 폼 만들기

 

 <form>
        아이디: <input type="text"><br>
        비밀번호: <input type="password">
 </form>

 

로그인 폼

로그인 폼을 간단하게 만들 수 있다. 

 

 

2. placeholder 속성

 

<form>
        아이디: <input type="text" placeholder="아이디 입력"><br>
        비밀번호: <input type="password" placeholder="비밀번호 입력">
</form>

 

placeholder 이용

>> placeholder 속성:  입력 필드에 사용자가 입력할 데이터에 대해 힌트를 줌.

 

 

3. reset 속성

입력한 값을 모두 초기화 할 수 있다.

 

<form>
      아이디: <input type="text" placeholder="아이디 입력"><br>
      비밀번호: <input type="password" placeholder="비밀번호 입력"><br>
      <input type="reset">
</form>

 

reset 이용

 

4. value 속성

- input요소의 초깃값 지정(type에 따라 다름)

 

<input type="text" value="input"><br>
<input type="submit" value="submit"><br>
<input type="checkbox" value="check">

 

- "text", "password" : 입력 필드의 초깃값을 정의

- "checkbox", "image", "radio" : 해당 입력 필드 선택 시 서버로 제출되는 값을 정의

- "button", "reset", "submit" : 버튼 내의 텍스트 정의

 

value 이용

 

5. maxlength/disabled/readonly

 

<input type="text" value="input" maxlength="10"><br>
<input type="text" value="input"maxlength="10" disabled><br>
<input type="text" value="input"maxlength="10" readonly><br>

 

maxlength: 텍스트 최대 입력 길이 지정

disabled: 입력 X , 값 전달 X

readonly: 입력 X , 값 전달 O

 

 

6. radio 속성

 

    <div id="radio_area">
        10대: <input type="radio" name="myradio">
        20대: <input type="radio" name="myradio">
        30대: <input type="radio" name="myradio">
    </div>

 

radio 이용

>> 심리 테스트 같은 검사를 할 때 자주 쓰임.

 

radio 속성의  name은 같은 이름으로 줘야 같은 radio 그룹이 됨.

> name을 다르게 준다면?

 

    <div id="radio_area">
        10대: <input type="radio" name="myradio">
        20대: <input type="radio" name="myradio1">
        30대: <input type="radio" name="myradio2">
    </div>

 

radio 이용2

>각각 다른 그룹으로 인식함.

 

 

7. checkbox

중복으로 check를 할 수 있는 box를 만든다.

 

    Html:<input type="checkbox" name="checkbox1">
    Css:<input type="checkbox" name="checkbox2">
    Javascript<input type="checkbox" name="checkbox3">

 

checkbox 이용