JavaScript는 HTML5_javascript 기술의 일부 양식 속성을 발견합니다.-JS 튜토리얼-php.cn

JavaScript는 HTML5_javascript 기술의 일부 양식 속성을 발견합니다.

WBOY

풀어 주다： 2016-05-16 15:51:19

원래의

1196명이 탐색했습니다.

입력 속성:
자리 표시자: 사용자에게 설명 텍스트나 프롬프트 정보를 표시하는 입력 상자의 기본값

자동완성: 값이 켜져 있고 꺼져 있습니다. . "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>

로그인 후 복사

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.