input /label/text/password/radio/checkbox/submit/reset/file

 

    <form action="slamdunk.html">
        이름 : <input type="text" value ="짱구">
        <br>
        <!-- name주게되면 주소창이 바뀐다 파라미터 -->
        이름 : <input type="text" name="txt_name" placeholder="이름을 입력하세요">
        <br>
        전화번호 : <input type="text" name="txt_name" placeholder="전화번호를 입력하세요">
        <br>
        비밀번호: <input type="password" name="password" placeholder="비번을 입력하세요">
        <br>
        <input type="radio" name="group" value="A">A
        <input type="radio" name="group" value="B">B
        <input type="radio" name="group" value="C">C
        <input type="radio" name="group" value="D">D
        <!-- submit이라고 넣고 form에 action속성을 주게된다 -->
        <br>
        <input type="checkbox" name="favorite_fruit" value="딸기"> 땔기
        <input type="checkbox" name="favorite_fruit" value="복숭아">복숭아
        <input type="checkbox" name="favorite_fruit" value="포도"> 포도
        <input type="checkbox" name="favorite_fruit" value="사과"> 사과
        <br>
        <input type="submit" value="등록">
    </form>

*<label> 태그는 폼 요소에 이름표를 붙이기 위한 것
이 이름표를 레이블이다. 쉽게 말하면 인풋 입력 창 앞에 있는 텍스트를 생각. 아래 그림에서는 '이름', '나이'

 

<label>태그는 다음의 두 가지 방법으로 사용할 수 있습니다. 

 

1) 명시적 작성 방식

명시적 작성 방식은 <label>태그와 <input>태그를를 따로 사용하고 <label>태그의 for속성을 사용하여 연결해주는 방식.

for속성에 input태그의 id값을 넣어줌. 

 

*사용하면 좋은것? >> 이름만 눌러도 네모칸에 바로 작성할 수 있게 된다

 

 

 

2) 암시적 작성 방식

암시적 작성 방식은 <label>태그 안에 폼 <input>태글를 넣는 방법으로  for 속성을 명시하지않아도 암시적으로 라벨태그를 연결해주는 방법

대부분은 명시적 방식을 선호, 그 이유는 좀 오래된 기기들이 암시적 방식을 지원하지 않는대.. 왠만하면 for 속성을 사용해주는게 조오타

 

https://jigeumblog.tistory.com/61   <label 참고자료

---

name: 변수 호출용

value :서버의 데이터 제출용

name 으로 value값을 가져올 수 있다

ex) name : 1201호  value: 택배

---

1)text

?뒤부터는 데이터이다

---

2)password

 

---

3)radio

 

값은 value가 넘어간다

---

*checked쓰면 자동으로 체크된다

---

*required 쓰면 입력 하지 않을 시 필수항목이라고 알림뜬다

 

---

*만약 name이 다르면 택1이 안된다

---

4)checkbox

여기도 name 똑같게

---

5)submit

데이터 넘길떈 submit쓰자

---

button은 폼으로 넘겨주지 않는다 별도이벤트 달아서 쓰는것

*어 근데 button 하하하 적힌부분 실행하면 form이 왜넘어가는거지?;;

Q. button에 type="button" 을 지정해주는 이유?

A. 이렇게 해야 디폴트값이 안들어가진다

button의 type에는 3가지 값을 지정--> submit, reset, button
만약 아무런 값도 지정하지 않았다면 기본값은 submit

즉, <button></button> === <button type="submit"></button>

이렇게 하면 form action이 실행안된다 
https://nykim.work/96 자세한 버튼설명>

 

---

6)reset

---

7)file

<input type="file">

그냥 이거만 쓰게되면 이미 만들어진거로만 쓸 수 잇다

각 브라우저마다 보이는게 다름

---

그럼 css로 바꿔보자

display : none으로 원래꺼를 숨기고 label로 아이디값을 줘서 연결시키고 다른부분을 css로 만든다

                <div style="width: 250px; margin: 0 auto;">

                    <label for="file">

                        <p style="color: darkgray; background-color: white; padding: 5px;">파일선택</p>

                    </label>

                    <input type="file" value="file" id="file" style="display: none;">

                </div>