Jam's story

[HTML] 날짜 ,시간, 자동완성속성, 이메일 본문

WEB/HTML

[HTML] 날짜 ,시간, 자동완성속성, 이메일

애플쩀 2022. 5. 19. 11:52

autocomplete="on"

 사용자 이전에 입력한 값을 기반으로 자동완성 속성

 

비밀번호
<input type="password" name="passwd">
비밀번회 :

 

최대값을 주려면 

비밀번호:<input type="password" name="passwd"maxlength="8">
비밀번호:

 

입력값을 가운데에 정렬  :style="text-align:center;"

비밀번호:<input type="password" name="passwd"maxlength="8" style="text-align:center;">

 

비밀번호:
이미지 태그 
<input type="image" src="../images/SiSt.ico">
<image alt=""src="../images/SiSt.ico">

 

 

색상 태그 
<input type="color" id="favcolor"name="favcolor">
날짜 태그 
  • window 객체는 모든 객체의 최상위 부모이고 생략가능
  • 모든 input 태그들의 입력값, 선택값은 value 속성값으로 설정, 가져오기도 한다. 
<input type="date" id="birth">
<button type="button" onclick="btn_date()">선택한 날짜 확인</button>
<script>


function btn_date(){

	var birth=document.getElementById("birth").value;
	alert(birth);
}
</script>
</form>

 

날짜 제한하기 

설문투표기간:
<input type="date" min="2022-05-18" max="2022-05-25">
설문투표기간:

 

날짜와 시간 까지 선택 

<input type="datetime-local">
<input type="datetime">

년도와 월만 선택 

<input type="month">

 

이메일

submit을 하면 @가 붙어있는지 자동으로 유효성 검사 까지 한다. 

email: <input type="email">
email:
읽기밖에 안되는 readonly
<input type="text" value="홍길동"readonly="readonly">
사용안한다. 
<input type="text" value="홍길동"disabled="disabled">
input text 사이즈 조정 
<input type="text"size="50">

 

필수입력

required="required" 

 

 

전화번호
전화번호:<input type="tel" pattern="[0-9]{3}-\d{4}-\d{4}">
전화번호:

 

숫자만을 입력받을때 
<input type="number" min="10" max="90" step="10">

 

기본값 설정

<input type="number" min="10" max="90" value="30" step="10">

 

 

range
<input type="range" name="volumn"min="0"max="100" value="0">

 

 

 값을 가져와보자 

 

body 에

<body onload="init()">
<input type="range" id="volumn"name="volumn"min="0"max="100" value="0">
<div id="demo"></div>
<input type="submit">
</form>
<script>
function init(){
	//alert("로딩");
	var v=document.getElementById("volumn");
	var d=document.getElementById("demo");
	
	d.innerText=v.value;
}

 

값이 움직일때마다 변경되길 원한다면 

oninput 이벤트는 슬라이더 변경(움직임) 할때마다 일어나는 이벤트 

<input type="range" id="volumn"name="volumn"min="0"max="100" value="10"  oninput="volum_change()">
<div id="demo"></div>

<script>
function volum_change(){
	var v=document.getElementById("volumn");
	var d=document.getElementById("demo");
	
	d.innerText="value: "+v.value;
}
</script>

 

검색: <input type="search">
<br>
url만 입력 유효성 검사까지: <input type="url">
<br>
연도와 주 선택: <input type="week">
<br>
우편번호: <input type="text"  pattern="\d{5}|\d{3}-[0-9]{3}">
<br>
시간: <input type="time">
검색:
url만 입력 유효성 검사까지:
연도와 주 선택:
우편번호:
시간:
저작자표시

'WEB > HTML' 카테고리의 다른 글

[HTML] Canvas  (0) 2022.05.19
[HTML] 이미지버튼, DATALIST, INPUT  (0) 2022.05.19
[HTML] textarea, input, option  (0) 2022.05.19
[HTML] 반응형웹  (0) 2022.05.18
[HTML] HEAD 태그 안  (0) 2022.05.18
'WEB/HTML' Related Articles more
Comments