HTML Input Types

<input type="text"> : 기본값이며 한줄의 텍스트 입력칸을 만든다

 

<input type="password"> : text 속성과 같고 문자를 별표시로 숨겨서 표시한다

 

<form action="/action_page.php">
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd"><br><br>
  <input type="submit" value="Submit">
</form>

 

---

<input type ="submit"> : 제출버튼을 생성

action 속성의 form-handler(데이터 처리서버)로 폼 양식을 제출

submit 버튼의 value를 설정하지 않았을때 버튼에 기본 텍스트(제출)로 표시된다

 

<input  type="reset">: 초기화 버튼을 생성. 눌렀을시 기본값으로 재설정

 

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form> 

 

---

<input  type="radio"> :  라디오 버튼을 생성 - 한개의 제한된 선택

 

<form action="/action_page.php">
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label><br><br>
  <input type="submit" value="Submit">
</form> 

 

 

---

<input type="checkbox"> :  체크박스 생성. 0개부터 여러개까지 선택가능

 

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

 

---

<input type="button"> : 버튼 생성

 

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

버튼 클릭시 나타나는 알림창

---

<input type="color"> :  색상 선택 창 생성

 

<form action="/action_page.php">
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor" value="#ff0000">
  <input type="submit" value="Submit">
</form>

 

 

---

<input type="date"> : 날짜 입력창 생성 (년, 월, 일)

• max :  input의 최대값  /  min : input의 최소값

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>

 

 

---

<input type="datetime-local"> : 날짜 시간 입력 창을 만듬 (년, 월, 일, 시, 분, 초)

 

<form action="/action_page.php">
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
  <input type="submit" value="Submit">
</form>

 

 

---

<input type="email"> :  이메일 주소창을 만듬

 

<form action="/action_page.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="Submit">
</form>

 

---

<input type="file"> :  파일 선택 창 생성

 

<form action="/action_page.php">
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile"><br><br>
  <input type="submit" value="Submit">
</form>

 

---

<input type="hidden"> : 사용자에게 보이지 않는 숨겨진 창 생성

 

<input type="image"> :  이미지로 된 전송 버튼 생성

---

<input type="month"> :  달과 년 표시창 생성

 

<form action="/action_page.php">
  <label for="bdaymonth">Birthday (month and year):</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
  <input type="submit" value="Submit">
</form>

 

---

<input type="number"> :  숫자 입력창 생성

• max :  input의 최대값  /  min : input의 최소값  /  step : 수 변화 단위

<form action="/action_page.php">
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
  <input type="submit" value="Submit">
</form>

 

---

<input type="range"> :  숫자 입력 슬라이더 장치 생성

 

<form action="/action_page.php" method="get">
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
  <input type="submit" value="Submit">
</form>

 

---

<input type="search"> :  검색창 생성. 기본 text field와 동일 모습을 보임

 

<form action="/action_page.php">
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
  <input type="submit" value="Submit">
</form>

 

---

<input type="tel"> :  전화번호 입력창 생성

 

<form action="/action_page.php">
  <label for="phone">Enter a phone number:</label><br><br>
  <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br><br>
  <small>Format: 123-45-678</small><br><br>
  <input type="submit" value="Submit">
</form>

 

---

<input type="time"> :  시간 입력창 생성

 

<form action="/action_page.php">
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
  <input type="submit" value="Submit">
</form>

 

---

<input type="url"> :  주소 입력 창 생성

 

<form action="/action_page.php">
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">
  <input type="submit" value="Submit">
</form>

 

---

<input type="week"> :  주와 년 입력 창 생성

 

<form action="/action_page.php">
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
  <input type="submit" value="Submit">
</form>

 

---