[form] HTML - <input> 태그 ★★★ - 입력창 + 입력버튼 (= input태그 = 인풋태그) ※ 자동포커스 (= 오토포커스 = 커서자동 = 자동커서 autofoucs) + 자동완성해제 (autocomplete="off")

1. <input> 예제 - 텍스트 및 패스워드 입력창 / 전송버튼
2. <input> 정의
3. <input> 구문
4. <input> 속성
5. <input type="hidden"> vs. <input type="..." style="display:none"> 차이점
6. <input> 예제 - placeholder 글자색
7. <input> 예제 - width, height 속성
8. <input> 예제 - 비밀번호 입력 시 ●●●●● 특수문자 안 보이는 에러 해결
9. <input> 예제 - 입력한 비밀번호 보이게 노출 설정
10. <input> 예제 - IE 브라우저에서 입력창 우측의 x 버튼 제거
11. <input> 예제 - 숫자 (최소값/최대값) 설정
12. <input> 예제 - (양의 정수 / 음의 정수)만 입력
13. <input> 예제 - 소수점 있는 소수 입력
14. <input> 예제 - (type="checkbox" / type="radio") 차이점 비교

<input> 예제 - 텍스트 및 패스워드 입력창 / 전송버튼

 

<p>홈짱닷컴 (homzzang.com) 로그인</p>

<form action="login.asp">
  <p><label for="id">아이디 : </label><input type="text" name="id" id="id"></p>
  <p><label for="password">비밀번호 : </label><input type="password" name="password" id="password"></p>
  <input type="submit" value="확인">
</form>

결과 보기

<input> 정의

 

사용자의 데이터를 입력하는 서식 폼이나, 입력된 테이터를 전송하는 확인 버튼을 만들 때 사용

 

---

 

1. 
서식을 입력할 때 필요한 입력 서식으로 사용시 <form> 태그 안에 사용.

 

2. 
type 속성의 여러 가지 속성값에 따라, 다양한 용도로 사용 가능. 아래 type 속성 참고.

 

3. 
<label> 태그 : <input> 태그 꼬리표(= 설명문).

 

4. 
전송(=확인) 버튼 만들 때, 
<a> 태그 대신 <input>태그 이용하는 게 브라우저나 스크린 리더기가 읽어들일 때 좋음.

 

5. 
종료 태그 없이 단독 사용. 

cf. XHTML에서는 끝에 / 붙여 <input />처럼 사용. 

 

6. mdn input 강의

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

 

<input> 구문

 

<input 속성="속성값"> 

 

<input> 속성

<input type="hidden"> vs. <input type="..." style="display:none"> 차이점

<input type="hidden">

 

사용자 입력값을 애시당초 안 받도록 설계됨. (기본 value값 사용)

∴ 입력값 유효성 검사 대상 X

∴ 자동완성 대상 X

∴ 사용자 입력 관련한 이벤트 대상 X

 

---

<input type="..." style="display:none">

또는, <input type="..." style="visibility:hidden">

 

눈에 보이진 않지만, 사용자 입력값 받도록 설계된 걸로 간주.

∴ 입력 유효성 검사 대상 O

∴ 자동완성 대상 O

∴ 사용자 입력 관련한 이벤트 대상 O

 

<input> 예제 - placeholder 글자색

<style>
input:-ms-input-placeholder { color: red; } // IE 10 이상 
input::-webkit-input-placeholder { color: red; } //  Webkit, Blink, Edge
input::-moz-placeholder { color: red; } // Mozilla Firefox 4 부터 18
input::-moz-placeholder { color: red; } // Mozilla Firefox 19 이상
</style>

<input type="text" placeholder="입력 예제" />

결과보기

<input> 예제 - width, height 속성

 

<input type="image" src="logo.gif" alt="Submit" width="48" height="48">

 

※ 단위는 따로 적을 필요 없이, px 단위 숫자 기재

<input> 예제 - 비밀번호 입력 시 ●●●●● 특수문자 안 보이는 에러 해결

 

에러 증상: 비밀번호 입력 시 ●●●●● 대신 빈 공백으로 보임.

에러 원인: 일부 폰트 (예: Nanum Square)에서 증상 발생.

에러 해결: font-family (폰트 종류) 변경하면 정상 출력 됨.

 

---

예제 - 정상 출력 X

 

<style>

@import url(//cdn.rawgit.com/hiun/NanumSquare/master/nanumsquare.css);

input {font-family: 'Nanum Square';}

</style>

 

<input type="password">

 

결과보기

---

예제 - 정상 출력 O

 

<style>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

input {font-family: 'Open Sans', sans-serif;}

</style>

<input type="password">

 

결과보기

<input> 예제 - 입력한 비밀번호 보이게 노출 설정

 

수정 전

<input type="password" ...

 

수정 후

<input type="text" ...

 

※ 보안 위해, 되도록이면 변경 자제.

<input> 예제 - IE 브라우저에서 입력창 우측의 x 버튼 제거

※ 아래 CSS 추가.

 

input[type=text]::-ms-clear {display:none;}

또는,

input[type=text]:-ms-clear {display:none;}

 

PS. 원칙은 콜론 2개(::)가 맞으나, 콜론 1개(:)가 더 호환성이 좋음.

<input> 예제 - 숫자 (최소값/최대값) 설정

 

<form>

    <input type="number" name="price" placeholder="금액 입력" min="1000" max="5000">

    <input type="submit" value="제출">

</form> 

 

결과보기

---

PS.

• 입력값이 허용 범위 내인지 여부는 submit 후에 판정됨.
• 입력 즉시 체크하려면, (JavaScript/jQuery) 이용 필요.
• 숫자는 따옴표로 안 묶어도 정상작동됨. (예) <input type="number" name="price" placeholder="금액 입력" min=1000 max=5000>

 

<input> 예제 - (양의 정수 / 음의 정수)만 입력

 

• 양의 정수만 입력 허용: <input type="number" min="1">
• 음의 정수만 입력 허용: <input type="number" max="-1">

 

<input> 예제 - 소수점 있는 소수 입력

 

• 소수점 1자리 소수: <input type="number" step="0.1">
• 소수점 2자리 소수: <input type="number" step="0.01">

 

<input> 예제 - (type="checkbox" / type="radio") 차이점 비교

[목차]

• (checkbox / radio) 타입 차이
• type="checkbox" 예제
• type="radio" 예제

---

(checkbox / radio) 타입 차이

 

• type="checkbox" : 여러 개 선택 가능. (※ 배열 이용)
• type="radio" : 오직 1개만 선택 가능.

 

---

type="checkbox" 예제

 

▒ PHP (action_page.php)

<?php

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

  $langs = $_POST['langs'];

  if (!empty($langs)) {

    foreach ($langs as $color) {

      echo htmlspecialchars($color) . "<br>";

    }

  } else {

    echo "언어선택 안됨.";

  }

}

?>

 

▒ HTML

<form action="action_page.php" method="post">

  <label><input type="checkbox" name="langs[]" value="html">HTML</label>

  <label><input type="checkbox" name="langs[]" value="css">CSS</label>

  <label><input type="checkbox" name="langs[]" value="js">JS</label>

  <input type="submit" value="확인">

</form>

 

---

type="radio" 예제

 

▒ PHP (action_page.php)

<?php

if ($_SERVER['REQUEST_METHOD'] === 'POST') {

  $lang = isset($_POST['lang']) ? $_POST['lang'] : '';

  if (!empty($lang)) {

    echo htmlspecialchars($lang);

  } else {

    echo "선택언어 없음.";

  }

}

?>

 

▒ HTML

<form action="action_page.php" method="post">

  <label><input type="radio" name="lang" value="html">HTML</label>

  <label><input type="radio" name="lang" value="css">CSS</label>

  <label><input type="radio" name="lang" value="js">JS</label>

  <input type="submit" value="확인">

</form>