입력 속성:
자리 표시자: 사용자에게 설명 텍스트나 프롬프트 정보를 표시하는 입력 상자의 기본값
자동완성: 값이 켜져 있고 꺼져 있습니다. . "on"은 해당 필드를 채워 제출한 후 페이지로 돌아왔을 때 다시 입력할 때 이전에 입력한 정보가 표시된다는 의미입니다. off는 사용자 입력 데이터의 보안을 포함하여 폐쇄됨을 의미합니다. 기본값은 켜져 있습니다
autofocus: 페이지가 로드될 때 자동으로 포커스를 얻도록 입력을 설정합니다. 페이지는 하나의 입력에 대해서만 이 속성을 설정할 수 있습니다. 여러 입력을 설정하는 것은 설정이 없는 것과 같습니다.
목록 기능 및 데이터 목록: 목록을 통해 입력 상자에 드롭다운 목록을 추가합니다. . js에 구현된 "자동 완성" 기능과 동일하지만 퍼지 쿼리를 수행할 수 없습니다
데이터 목록에 "a34343"과 "24234"라는 두 개의 값이 있는 경우 사용자는 3을 입력한 후 두 값이 모두 나타날 것으로 예상하지만 실제로는 아무 것도 나타나지 않습니다.
예를 들어 a를 입력하면 드롭다운 a34343이 나타나고 4를 입력하면 드롭다운 값이 사라집니다.
필수: 이 요소는 양식을 제출하기 전에 채워야 합니다. 즉, 비워둘 수 없습니다. 프롬프트 메시지를 대체할 수 있는 속성이 없으면 '이 필드를 작성하십시오'라는 프롬프트 메시지 때문에 권장되지 않습니다.
패턴 : 입력태그에 규칙적인 패턴을 쓰는 곳입니다. . 유형이 이메일 또는 URL인 입력 컨트롤에는 관련 정규식이 내장되어 있습니다. 값이 정규식과 일치하지 않으면 양식이 확인에 실패하고 제출할 수 없습니다. .
이메일이나 URL 유형의 요소에는 프롬프트 정보와 일반 패턴이 고정되어 있으므로 사용하지 않는 것이 좋습니다. . js에서 직접 다시 작성하는 것이 좋습니다.
일부 입력 설정:
rangeUnderflow는 수치 제어의 최소값을 제한하며, 입력 유형="number" min="0" value="20"
rangeOverflow는 수치 제어의 최대값을 제한합니다. 최대 입력 유형="number" max="100" value="20"
stepMismatch는 입력 값이 min, max 및 step의 설정을 준수하는지 확인합니다. 최대 최소 단계를 설정하고 input type="number" min="0" max="100" step="10" value="20"
다음은 input=number에서 사용하는 작은 함수입니다.
function inputV(inpFields,tips){//input值范围判断。。0-100.正正数 /** * input值范围判断。。0-100.正正数 * range 范围:使用<input type="number" min="0" max="100"/> * if(inputV(v3,msgABC.t4)==false){return false;} * **/ var km=inpFields[0].validity,v3=inpFields.val(); console.log('不是数字:',km.badInput,'超出范围:',km.rangeOverflow,'小于最小值:',km.rangeUnderflow); if(km.badInput||km.rangeOverflow||km.rangeUnderflow){//a返回true 22返回true -1 返回 true alert(tips); return false; } if(isNaN(parseInt(v3))){ console.log('NaN 不判断.因为值为空'); return true; } else if(!!isNaN(v3)||parseInt(v3)!=parseFloat(v3)){//不是数字!!isNaN('v3') alert(tips); return false; } return true; }
목록 속성 및 데이터 목록:
<input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="W3School" value="http://www.w3school.com.cn" /> <option label="Google" value="http://www.google.com" /> <option label="Microsoft" value="http://www.microsoft.com" /> </datalist> <form action="http://localhost/test.php" method="post" id="register"></form> url:<input type="url" name="url" form="register" required/><br /> user:<input type="text" name="user" value="" form="register"/><br /> pwd:<input type="password" name="pwd" value="" form="register" /><br /> <select name="year" form="register"> <option value="1970">1970</option> <option value="1980">1980</option> <option value="1990">1990</option> </select> <input type="submit" value="注册" form="register"/>
일반:
이메일:< ;br />
주소:
날짜:
시간:
월:
주:
번호:
슬라이더
검색:
색상:
<input type="text" name="auto" value="" list="movie" /> <datalist id="movie"> <option>11111111</option> <option>243234234</option> <option>3324234</option> </datalist>
출력형태 출력
<form action="" method="post" oninput="result.value=parseInt(no1.value*no2.value)"> <input type="number" name="no1" value=""/> <input type="number" name="no2" value=""/> <output name="result" ></output> </form>