HTML5의 새로운 양식 속성
HTML5의 <form> input> 태그에 속성이 추가되었습니다.
자동 완성
검증 없음
자동완성
자동초점
양식
formaction
formenctype
formmethod
formnovalidate
formtarget
높이 및 너비
목록
최소 및 최대
다중
패턴(정규 표현식)
자리 표시자
필수
단계
< ;form> / <input> autocomplete 속성
autocomplete 속성은 양식 또는 입력 필드에 자동 완성 기능이 있어야 함을 지정합니다.
팁: 자동 완성 속성은 양식 요소에서 활성화될 수 있지만 입력 요소에서는 비활성화될 수 있습니다.
참고 : 자동 완성은 <form> 태그뿐만 아니라 텍스트, 검색, URL, 전화, 이메일, 비밀번호, 날짜 선택기, 범위 등의 <input> 태그에도 적용됩니다. 색상.
인스턴스
HTML 형식으로 열기 자동 완성(입력 필드가 자동 완성을 끕니다):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="" autocomplete="on">
姓名:<input type="text" name="fname"><br/>
留言<input type="text" name="content"><br/>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
<p>填写并提交表单，然后重新刷新页面查看如何自动填充内容。</p>
<p>注意 form的 autocomplete属性为 "on"（开），但是e-mail自动为“off”（关）。</p>
</body>
</html> 프로그램을 실행하고 사용해 보세요
팁 : 일부 브라우저에서는 이 속성을 적용하려면 자동 완성을 활성화해야 할 수도 있습니다.
<form> novalidate 속성
novalidate 속성의 부울 속성
novalidate 속성은 양식을 제출할 때 양식 또는 입력 필드의 유효성을 검사하지 않도록 지정합니다.
인스턴스
제출된 양식 데이터를 확인할 필요가 없습니다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>
<p><strong>注意</strong>在 Safari 和 Internet Explorer 9 及之前的版本中不支持 novalidate 属性。</p>
</body>
</html> 프로그램을 실행하여 사용해 보세요
<input> autofocus 속성
autofocus 속성은 부울 속성입니다.
autofocus 속성은 도메인이 페이지가 로드되면 자동으로 획득됩니다.
예
페이지가 로드될 때 "메시지" 입력 필드가 자동으로 포커스되도록 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="">
姓名: <input type="text" name="fname" ><br>
留言: <input type="text" name="content" autofocus><br>
<input type="submit">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 autofocus 属性。</p>
</body>
</html> 프로그램 실행 잠시 시도해 보세요
오토 포커스를 이름 입력 필드로 변경하고 두 실행 결과를 비교하여 차이를 확인할 수 있습니다
<input> ; 양식 속성
양식 속성은 입력 필드가 속하는 하나 이상의 양식을 지정합니다.
팁 : 두 개 이상의 양식을 참조해야 하는 경우 공백으로 구분된 목록을 사용하세요.
인스턴스
양식 외부에 있는 입력 필드는 HTML 양식을 참조합니다(입력 양식은 여전히 양식의 일부입니다).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="" id="form1">
姓名: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
<p> "留言" 字段没有在form表单之内，但它也是form表单的一部分。</p>
留言: <input type="text" name="lname" form="form1">
</body>
</html> 프로그램을 실행하고 사용해 보세요
참고 : IE는 양식 속성을 지원하지 않습니다
<input> formaction 속성
formaction 속성은 양식 제출의 URL 주소를 설명하는 데 사용됩니다.
formaction 속성은 <form> 요소.
참고: formaction 속성은 type="submit" 및 type="image"에 사용됩니다.
인스턴스
다음 HTML 양식에는 두 개의 서로 다른 주소가 있는 제출 버튼이 포함되어 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="demo.php">
姓名: <input type="text" name="fname"><br>
密码: <input type="text" name="lname"><br>
<input type="submit" value="提交"><br>
<input type="submit" formaction="admin.php" value="提交">
</form>
</body>
</html> 위 프로그램 중 하나는 데모.php 페이지에 제출되고 다른 하나는 관리자에게 제출됩니다. .php 페이지
< ;input> formenctype 속성
formenctype 속성은 양식에 의해 제출된 데이터의 인코딩을 설명합니다. 서버에 (양식 양식의 method="post" 양식에만 해당)
formenctype 속성은 양식 요소의 enctype 속성을 재정의합니다.
Main : 이 속성은 type="submit" 및 type="image"와 함께 사용됩니다.
인스턴스
첫 번째 제출 버튼에는 양식 데이터를 보내기 위한 기본 인코딩이 있고, 두 번째 제출 버튼은 "multipart/form"으로 양식 데이터를 보냅니다. -data" 인코딩 형식으로 양식 데이터 보내기:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="" method="post">
name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
<input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>
</body>
</html> 프로그램을 실행하여 사용해 보세요
<input> formmethod 속성
formmethod 속성은 양식이 제출되는 방식을 정의합니다.
formmethod 속성은 <form> 요소의 method 속성을 재정의합니다.
참고 : 이 속성은 type="submit" 및 type="image"와 함께 사용할 수 있습니다.
인스턴스
양식 제출 방법 재정의 예:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="" method="get">
姓名: <input type="text" name="fname"><br>
密码: <input type="text" name="lname"><br>
<input type="submit" value="提交">
<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>
</body>
</html> 위 코드는 get 모드에서 페이지에 전달됩니다. 하나는 formmethod를 사용하여 제출 방법을 재정의하고 포스트 모드
<input> formnovalidate 속성 에서 emo-post.php 페이지에 제출하는 것입니다.
novalidate 속성은 부울 속성입니다.
novalidate 속성은 양식을 제출할 때 <input> 요소를 확인할 필요가 없음을 나타냅니다.
formnovalidate 속성은 <form> 요소의 novalidate 속성을 재정의합니다.
참고 : formnovalidate 속성은 type="submit
과 함께 사용됩니다. 🎜>
예
두 개의 제출 버튼이 있는 양식(검증 유무):
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="提交"><br>
<input type="submit" formnovalidate="formnovalidate" value="不验证提交">
</form>
</body>
</html> 실행 시도할 프로그램
<input> formtarget 속성
formtarget 속성은 양식을 나타내는 이름이나 키워드를 지정합니다.
formtarget 속성은
참고의 target 속성을 재정의합니다. submit" 및 type="image" . 를 사용하세요.
인스턴스
다른 창에 표시되는 두 개의 제출 버튼이 있는 양식:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action=" ">
作者姓名: <input type="text" name="fname"><br>
书本名: <input type="text" name="lname"><br>
<input type="submit" value="正常提交">
<input type="submit" formtarget="_blank" value="提交到一个新的页面上">
</form>
</body>
</html> 프로그램을 실행하고 사용해 보세요
<input> 높이 및 너비 속성
높이 및 너비 속성이 이미지에 지정됩니다. type <input> 라벨의 이미지 높이와 너비입니다.
참고: 높이 및 너비 속성은 이미지 유형의 <input> 태그에만 적용 가능합니다.
팁 : 이미지는 일반적으로 높이와 너비 속성을 모두 지정합니다. 이미지에 높이와 너비가 설정된 경우 페이지가 로드될 때 이미지에 필요한 공간이 유지됩니다. 이러한 속성이 없으면 브라우저는 이미지의 크기를 알 수 없으며 적절한 공간을 확보할 수 없습니다. 이미지를 로드하는 동안 페이지 레이아웃 효과가 변경됩니다(이미지가 로드된 경우에도 마찬가지).
Instance
는 높이 및 너비 속성을 사용하여 이미지 제출 버튼을 정의합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="image" src="http://img3.imgtn.bdimg.com/it/u=4163745010,2599120287&fm=21&gp=0.jpg" alt="Submit" width="100" height="80">
</form>
</body>
</html> 프로그램을 실행하여 시도해 보세요. it out
<input> 목록 속성
list 속성은 입력 필드의 데이터 목록을 지정합니다. datalist는 입력 필드에 대한 옵션 목록입니다.
인스턴스
<datalist>:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="" method="post">
<input list="browsers" name="">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
</body>
</html> 에 미리 정의된<input> 값을 실행해 보세요.
<input> min 및 max 속성
min, max 및 step 속성은 숫자 또는 날짜가 포함된 입력에 사용됩니다. 한계(제약)을 지정합니다.
참고 : min, max 및 step 속성은 날짜 선택기, 숫자 및 범위와 같은 <input> 태그 유형에 적용됩니다.
예
<input> 요소 최소값 및 최대값 설정:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="">
输入 1980-01-01 之前的日期:
<input type="date" name="bday" max="1979-12-31"><br>
输入 2000-01-01 之后的日期:
<input type="date" name="bday" min="2000-01-02"><br>
数量 (在1和5之间):
<input type="number" name="quantity" min="1" max="5"><br>
<input type="submit">
</form>
</body>
</html> 프로그램을 실행하고 사용해 보세요
참고 : Internet Explorer 9 이하 IE 버전과 Firefox는 입력 태그의 최대 및 최소 속성을 지원하지 않습니다.
참고 : max 및 min 속성은 Internet Explorer 10에서 날짜 및 시간 입력을 지원하지 않으며 IE 10은 이러한 입력 유형을 지원하지 않습니다.
<input> 다중 속성
다중 속성은 부울 속성입니다.
다중 속성 사양< 다중 ;input> 요소 내에서 값을 선택할 수 있습니다.
참고 : multiple 속성은 이메일 및 파일과 같은 <input> 태그 유형에 적용됩니다. : 이메일, 파일.
인스턴스
여러 파일 업로드:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="">
选择图片: <input type="file" name="img" multiple>
<input type="submit">
</form>
<p>尝试选取一张或者多种图片。</p>
</body>
</html> 프로그램을 실행하고 사용해 보세요
<input> 패턴 속성
패턴 속성은 <input> .
참고: 패턴 속성은 텍스트, 검색, URL, 전화번호, 이메일, 비밀번호 등의 <input> 태그 유형에 적용됩니다.
팁: 다음 용도로 사용됩니다. 전역 제목 속성은 패턴을 설명합니다.
팁: JavaScript 튜토리얼
예 에서 정규 표현식에 대해 알아볼 수 있습니다. 🎜>
다음 예에서는 세 글자만 포함할 수 있는 텍스트 필드를 보여줍니다(숫자 및 특수 문자 제외).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="">
请输入3位字母: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
</body>
</html> 프로그램을 실행하여 사용해 보세요
placeholder 속성은 입력 필드의 예상 값을 설명하는 힌트를 제공합니다.
사용자가 값을 입력하기 전에 입력 필드에 간단한 프롬프트가 표시됩니다.
참고 : 자리 표시자 속성은 텍스트, 검색, URL, 전화, 이메일, 비밀번호 등의 <input> 태그 유형에 적용됩니다.
인스턴스
입력 필드 프롬프트 텍스트:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="">
姓名：<input type="text" name="fname" placeholder="请输入你的姓名"><br>
密码：<input type="text" name="lname" placeholder="请输入你的密码"><br>
<input type="submit" value="提交">
</form>
</body>
</html> 프로그램을 실행하고 사용해 보세요
<input> 필수 속성
필수 속성은 부울 속성입니다.
필수 속성은 입력 필드가 다음과 같아야 함을 지정합니다. 제출 전에 작성되었습니다(null일 수 없음).
참고: 필수 속성은 텍스트, 검색, URL, 전화, 이메일, 비밀번호, 날짜 선택기, 숫자, 확인란, 라디오 및 파일과 같은 <input> 태그 유형에 적용됩니다.
인스턴스
비워둘 수 없는 입력란:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="">
姓名: <input type="text" name="usrname" required>
<input type="submit">
</form>
</body>
</html> 프로그램을 실행하고 작성하지 않고 제출
<input> 단계 속성
참조 단계 속성은 입력 필드에 대한 유효한 숫자 간격을 지정합니다.
step="3"인 경우 유효한 숫자는 -3,0,3,6 등입니다.
팁 : step 속성은 다음을 사용하여 생성할 수 있습니다. 최대 및 최소 속성 범위 값.
참고 : 단계 속성은 숫자, 범위, 날짜, 날짜/시간, 날짜/시간-로컬, 월, 시간 및 주 유형 유형과 함께 사용됩니다. .
예제
입력단계는 3으로 지정합니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<form action="">
<input type="number" name="points" step="3">
<input type="submit">
</form>
</body>
</html> 프로그램을 실행해서 사용해 보세요
참고 : Internet Explorer 9 및 이전 IE 버전 또는 Firefox는 입력 태그의 단계 속성을 지원하지 않습니다.
HTML5 <input> 태그
标签 标签 描述 <form> 定义一个form表单 <input> 定义一个 input 域
描述
<form> 정일일체form表单 <input> 설정 입력 域
<🎜>
다음 섹션 