이 글에서는 주로 HTML5 폼의 새로운 속성을 자세히 소개하고, 간단하고 이해하기 쉬운 예제 분석을 첨부합니다. 필요하신 분들 한번 보세요
1. 폼 내 요소의 form 속성
H5에서는 페이지 어디에든 폼을 넣을 수 있습니다. , 그리고 요소에 대해 양식 속성을 지정하고 속성 값은 양식의 ID이므로 해당 요소는 지정된 양식
<form id="testform">
<input type="text">
</form>
<textarea form="testform"></textarea>2. form formaction 속성 내
H4에서는 form submit 방식<form action="1.jsp"> </form>
<form action="1.jsp">
<input type="submit" action="1-1.jsp">提交到1页面</form>
<input type="submit" action="1-2.jsp">提交到2页面</form>
<input type="submit" action="1-3.jsp">提交到3页面</form>
</form>에 제출된 jsp 페이지에 양식의 각 속성을 추가할 수 있습니다. 양식 내
양식 수정 가능 요소별 제출 방법 지정<form action="1.jsp">
<input type="submit" action="1-1.jsp" formmethod="post">提交到1页面,post提交方法</form>
<input type="submit" action="1-2.jsp" formmethod="get">提交到2页面，get提交方法</form>
</form>4.
형식은 위와 동일하며 각 요소와 함께 작동하며 코드는형식으로 축약됩니다. 5. < 형식의 formtarget 속성 🎜>은 위와 같고, 각 요소에 적용되며, 코드는 축약합니다
6. autofocus 속성텍스트에 autofocus 속성을 추가합니다. 상자, 선택 상자 및 버튼 컨트롤은 화면이 열리면 자동으로 초점을 맞춥니다.
<input type="text" action="1-3.jsp" autofocus>提交到3页面</form>
대부분의 입력 요소에 사용할 수 있습니다. 입력 값이 비어 있으면 브라우저에 내용을 입력해야 한다는 텍스트 정보가 표시됩니다.
8. labels 속성은 양식의 모든 요소에 labels 속성을 추가할 수 있습니다. 요소입니다.
<script type="text/javascript">
window.onload = function () {
var text = document.getElementById('text');
var btn = document.getElementById('btn');
var form = document.getElementById('form');
btn.onclick = function() {
if (text.value.trim() =="") {
//alert(text.labels.length)
if(text.labels.length==1) {
var label = document.createElement("label");
label.setAttribute("for","text");
form.insertBefore(label,btn);
text.labels[1].innerHTML = "请输入姓名";
text.labels[1].setAttribute(
"style","font-size:9px;color:red");
}
}
else if(text.labels.length>1)
form.removeChild(text.labels[1]);
}
}
</script>
<form id="form">
<label id="label" for="text">姓名：</label>
<input id="text">
<input id="btn" type="button" value="验证">
</form>레이블 내부에 양식 요소를 배치하고 라벨의 컨트롤 속성을 통해 양식 요소에 액세스할 수 있습니다.
<script type="text/javascript">
function setValue() {
console.log(1);
var label =document.getElementById("label");
var textbox = label.control;
textbox.value = "231456"
}
</script>
<form>
<label id="label">
邮编：
<input id="txt_zip" maxlength="6">
<small>请输入6位数字</small>
</label>
<input type="button" value="设置默认值" onclick="setValue()">
</form>텍스트 상자(텍스트 또는 텍스트 영역)가 선택된 상태일 때 프롬프트 정보(회색)를 입력합니다.
<input type="text" palceholder="hahah">
의 목록 속성이 h5의 새로운 datalist 요소와 결합되어 프롬프트 상자
<를 만듭니다. 🎜>text:<input type="text" name="greeting" list="greetings">
<!-- 使用style="display:none";将datalist元素设置为不显示 -->
<datalist id="greetings" style="display:none">
<option value="你是人">你是人</option>
<option value="你是猪">你是猪</option>
<option value="你是狗">你是狗</option>
</datalist> 텍스트 상자에 있을 때 에 "당신"을 입력하면 아래에 "당신은 인간입니다", "당신은 돼지입니다", "당신은 개입니다"라는 3개의 프롬프트가 나타납니다. 키워드가 없으면 프롬프트가 표시되지 않습니다.
12. 텍스트 상자의 자동 완성 속성
autocomplete에는 "on", "off", 및 ""(지정되지 않음). 지정하지 않으면 브라우저의 기본값이 사용됩니다. 사용 방법은 다음과 같습니다
<input type="text" name="greeting" list="greetings" autocomplete="on">
텍스트 상자에 "나는 인간입니다"를 입력하고 제출을 클릭하면 이전 페이지로 돌아가서 "I"를 입력합니다. 텍스트 상자에 "나는 인간입니다"라는 메시지가 나타납니다.
13. 텍스트 상자
의 패턴 속성은 html 부분에서 직접 정규식을 사용하여 값 입력이 요구 사항을 충족하는지 확인하는 것과 같습니다.
내용을 입력하세요: 이 코드에는 숫자 3을 입력해야 합니다. 대문자 문자를 잘못 입력하면 '요청한 내용(Google)과 일치하도록 해주세요'라는 메시지가 나타납니다.14. 텍스트 상자
의 SelectionDirection 속성은 사용자가 마우스로 텍스트의 일부를 선택할 때 사용됩니다. 두 개의 요소를 사용할 수 있습니다. 이 요소는 선택 방향을 얻는 데 사용됩니다.
<script type="text/javascript">
function alertSelectionDirection() {
var control = document.forms[0]['text'];
var Direction = control.selectionDirection;
alert(Direction);
}
</script>
<form>
<input type="text" name="text">
<input type="button" value="惦记我" onclick="alertSelectionDirection()" >
</form>
15. 체크박스의 불확정 속성
과거에는 체크박스의 경우 선택과 비선택만 있었습니다. -selection Status, HTML5에서는 js의 이 요소에 indeterminate 속성을 사용하여 확인란의 "명시적으로 선택되지 않음" 상태를 나타낼 수 있습니다.
<script>
var cb = document.getElementById("cb");
//将indeterminate的属性设置为true
cb.indeterminate = true;
</script>
<input type="checkbox" indeterminate id="cb">indeterminate属性测试
16. 이미지 제출 버튼의 높이 속성과 너비 속성
높이를 지정합니다. 이미지 버튼 사진의 사진 높이
<input type="image" src="img/2.png" width="23" height="23">
17. textarea 요소
maxlength의 maxlength 속성 및 Wrap 속성: 정수 값을 사용하여 설정 textarea 요소에 입력할 수 있는 텍스트 수입니다.
wrap: 속성 값을 소프트 또는 하드로 지정할 수 있습니다. 속성이 하드인 경우 Enter 키를 사용하지 않았으나 텍스트가 지정된 범위를 초과하면 양식이 제출됩니다. 행을 추가하고 자동으로 줄 바꿈에 줄 바꿈 플래그를 추가합니다.
위 내용은 HTML5의 새로운 양식 속성 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
