html input type

https://developer.mozilla.org/ko/docs/Web/HTML/Element/input

<input>: 입력 요소 - HTML: Hypertext Markup Language | MDN

 

기본 적인 input 만 잘 사용해도 불필요한 코드를 줄이고 활용도를 높일 수 있음....

html의 form 내에서 input type이 date나 datetime-local 일때

date는 String 으로 받으면 변환이 되나,

datetime-local은 

@RequestParam("okname")
@DateTimeFormat(iso = DateTimeFormat.ISO.DATE) Date name, Model model) {
또는  @DateTimeFormat(pattern="yyyy-MM-dd") Date name, Model model) { 

형태로 변환을 해주어 야 함

=============== html  ================

<form th:action="@{/display-something}" method="get">
<label for="name">Name:</label>
<input type="datetime-local" id="name" name="okname" required
minlength="4" maxlength="8" size="10" value="valueName">
<button type="submit">submit</button>
</form>

============= controller ===========

@GetMapping("/display-something")
String displaySome(@RequestParam("okname")
@DateTimeFormat(iso = DateTimeFormat.ISO.DATE) Date name, Model model) {
// @DateTimeFormat(pattern="yyyy-MM-dd") Date name, Model model) {
model.addAttribute("theName", name);
System.out.println(name);
return "test/show-something";
}

===================================

<label for="name">Name (4 to 8 characters):</label>
<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">

가능한 유형은 다음과 같습니다.

유형설명기본 예제

button	기본 행동을 가지지 않으며 value을 레이블로 사용하는 푸시 버튼.
checkbox	단일 값을 선택하거나 선택 해제할 수 있는 체크박스.
color (en-US)	색을 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 색상 선택기를 열어줍니다.
date	날짜(연월일, 시간 없음)를 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력 등을 열어줍니다.
datetime-local (en-US)	날짜와 시간을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없습니다. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력과, 시계 등을 열어줍니다.
email (en-US)	이메일 주소를 편집할 수 있는 필드. 텍스트 입력 필드처럼 보이지만 유효성 검증 매개변수가 존재하며, 브라우저와 장치가 동적 키보드를 지원하는 경우 이메일에 적합한 키보드를 보여줍니다.
file	파일을 지정할 수 있는 컨트롤. accept 특성을 사용하면 허용하는 파일 유형을 지정할 수 있습니다.
hidden (en-US)	보이지 않지만 값은 서버로 전송하는 컨트롤. 오른쪽 칸에 예제가 있지만 숨겨져서 안보이네요!
image (en-US)	src 특성에 지정한 이미지로 나타나는 시각적 제출 버튼. 이미지의 src를 누락한 경우 alt 특성의 텍스트를 대신 보여줍니다.
month (en-US)	연과 월을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없습니다.
number (en-US)	숫자를 입력하기 위한 컨트롤. 스피너를 표시하고 지원되는 기본 확인을 추가합니다. 몇몇 장치에서는 동적 키패드들과 숫자 키패드를 표시합니다.
password (en-US)	값이 가려진 한줄 텍스트 필드. 사이트가 안전하지 않으면 사용자에게 경고합니다.
radio	같은 name 값을 가진 여러개의 선택중에서 하나의 값을 선택하게 하는 라디오 버튼입니다.
range (en-US)	값이 가려진 숫자를 입력하는 컨트롤. 디폴트 값이 중간값인 범위 위젯으로 표시합니다. 접속사 min 와 max 사이에 사용되며 수용가능한 값의 범위를 정의합니다.
reset (en-US)	양식의 내용을 디폴트값(기본값)으로 초기화하는 버튼. 권장되지 않습니다.
search (en-US)	검색문자열을 입력하는 한줄 텍스트 필드. 줄바꿈 문자는 입력값에서 자동으로 제거됩니다. 지원 브라우저에서 필드를 클리어하기 위해 사용되는 삭제 아이콘이 포함됩니다. 동적 키패드들이 있는 몇몇 장치에서 엔터키 대신에 검색 아이콘을 표시합니다.
submit (en-US)	양식을 전송하는 버튼
tel (en-US)	전화번호를 입력하는 컨트롤. 몇몇 장치에서 동적 키패드들과 전화번호 입력기를 표시한다.
text (en-US)	디폴트 값. 한줄의 텍스트 필드입니다. 새줄 문자는 입력값으로부터 자동으로 제거됩니다.
time (en-US)	시간대가 없는 시간값을 입력하는 콘트롤
url (en-US)	URL을 입력하는 필드. 텍스트 입력처럼 보이지만, 검증 매개변수가 있습니다. 동적 키보드들을 지원하는 브라우저와 장치들에 관련된 키보드가 있습니다.
week (en-US)	시간대가 없는 주-년 값과 주의 값을 구성하는 날짜를 입력하는 컨트롤입니다.