HTML5 양식 속성


HTML5의 <form> 및 <input> 태그에 여러 가지 새로운 속성이 추가되었습니다.

<form>새 속성:

  • 🎜>

  • 유효성 검사 없음

<input> 새 속성:

  • 자동 완성

  • 자동 초점

  • 형태

  • 형태

  • 형태

  • formmethod

  • formnovalidate

  • formtarget

  • 높이 및 너비

  • 목록

  • 최소 및 최대

  • 다중

  • 패턴(정규 표현식)

  • 자리 표시자

  • 필수

  • 단계

<form> / <input> autocomplete 속성

autocomplete 속성은 양식이나 입력 필드에 자동 완성 기능이 있어야 함을 지정합니다.

사용자가 자동 ​​완성 필드에 입력을 시작하면 브라우저는 해당 필드에 채워진 옵션을 표시해야 합니다.

팁: 자동 완성 속성은 양식 요소에서 켜질 수 있지만 입력 요소에서는 끌 수 있습니다.

참고: 자동 완성은 <form> 태그뿐만 아니라 텍스트, 검색, URL, 전화, 이메일, 비밀번호, 날짜 선택기 등의 <input> 태그에도 적용됩니다. 범위와 색상.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><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="demo-form.php" 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="demo-form.php">
  First name: <input type="text" name="fname" autofocus><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 autofocus 属性。</p>

</body>
</html>

인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요


<input> 양식 속성

양식 속성은 입력 필드가 속하는 하나 이상의 양식을 지정합니다.

팁:두 개 이상의 양식을 참조하려면 공백으로 구분된 목록을 사용하세요.


인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>

<p> "Last name" 字段没有在form表单之内，但它也是form表单的一部分。</p>

Last name: <input type="text" name="lname" form="form1">

<p><b>注意:</b> IE不支持form属性</p>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

<input> >formaction 이 속성은 양식 제출을 위한 URL 주소를 설명하는 데 사용됩니다.

formaction 속성은 <form> 요소의 action 속성을 재정의합니다.

참고:

formaction 속성은 type="submit" 및 type="image"에 사용됩니다.

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formaction="demo-admin.php" value="提交">
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formaction 属性。</p>

</body>
</html>

인스턴스 실행»
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.


<input> formenctype 속성

formenctype 속성은 다음의 데이터 인코딩을 설명합니다. 서버에 제출된 양식(form form method="post" form에만 해당)

formenctype 속성은 양식 요소의 enctype 속성을 재정의합니다.

주로:

이 속성은 type="submit" 및 type="image"와 함께 사용됩니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-post-enctype.php" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="提交">
  <input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formenctype 属性。</p>

</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="demo-form.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="提交">
  <input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formmethod 属性。</p>

</body>
</html>

인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

<input> formnovalidate 속성

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="demo-form.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="提交"><br>
  <input type="submit" formnovalidate="formnovalidate" value="不验证提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本,或Safari不支持input标签的 formnovalidate 属性。</p>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

<input> formtarget 속성
formtarget 속성은 양식 제출 데이터를 수신한 후 표시하는 이름이나 키워드를 지정합니다.

formtarget 속성. .

참고:

formtarget 속성은 type="submit" 및 type="image"와 함께 사용됩니다.

인스턴스

아아앙


인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.


<input>

높이 및 너비 속성은 이미지 유형의 <input> 태그에 사용되는 이미지 높이와 너비를 지정합니다.

참고: 높이 및 너비 속성은 이미지 유형의 <input> 태그에만 적용됩니다.

팁: 이미지는 높이와 너비 속성을 모두 지정하는 경우가 많습니다. 이미지에서 높이와 너비를 설정하면 이미지에 필요한 공간 페이지를 로드할 때 유지됩니다. 이러한 속성이 없으면 브라우저는 이미지의 크기를 모르고 예약할 수 없습니다. 적절한 공간. 이미지는 로딩 프로세스 중에 페이지 레이아웃 효과를 변경합니다. (이미지가 로드되었지만)

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="正常提交">
  <input type="submit" formtarget="_blank" value="提交到一个新的页面上">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 formtarget 属性。</p>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요


<input> 목록 속성

목록 속성은 입력 필드의 데이터 목록을 지정합니다. datalist는 입력 필드에 대한 옵션 목록입니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="image" src="img_submit.gif"  alt="Submit" width="48" height="48">
</form>


</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요


<input> min 및 max 속성

min, max 및 step 속성은 숫자나 날짜가 포함된 입력 유형에 대한 제한(제약)을 지정하는 데 사용됩니다.

참고: min, max 및 step 속성은 날짜 선택기, 숫자 및 범위와 같은 <input> 태그 유형에 적용됩니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
	
<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<input type="submit">
</form>

<p><strong>注意:</strong> Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。</p>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요


<input> 다중 속성

다중 속성은 부울 속성입니다.

다중 속성은 여러 값을 선택할 수 있음을 지정합니다. <input>

참고: 다중 속성은 이메일 및 파일과 같은 <input> 태그 유형에 적용됩니다. : 이메일, 파일.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">

 输入 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>

<p><strong>注意:</strong> Internet Explorer 9及更早IE版本，Firefox不支持input标签的  max 和 min 属性。</p>
<p><strong>注意:</strong>
在Internet Explorer 10中max 和 min属性不支持输入日期和时间，IE 10 不支持这些输入类型。</p>

</body>
</html>

인스턴스 실행»

"인스턴스 실행" 버튼을 클릭하여 확인하세요. 온라인 인스턴스


<input> 패턴 속성

패턴 속성은 <input> 요소의 값을 확인하는 데 사용되는 정규식을 설명합니다.

참고: pattern 속성은 텍스트, 검색, URL, 전화번호, 이메일 및 비밀번호와 같은 유형의 <input>에 적용됩니다.

팁: 은 전역 제목 속성에서 패턴을 설명하는 데 사용됩니다.

팁: JavaScript 튜토리얼

<🎜에서 정규 표현식에 대해 알아볼 수 있습니다. >인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  选择图片: <input type="file" name="img" multiple>
  <input type="submit">
</form>

<p>尝试选取一张或者多种图片。</p>

<p><strong>注意:</strong>  Internet Explorer 9及更早IE版本不支持input标签的 multiple 属性。</p>

</body>
</html>

인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.


<input> 자리 표시자 속성

자리 표시자 속성은 입력 필드의 예상 값을 설명하는 힌트를 제공합니다.

사용자가 값을 입력하기 전에 입력 필드에 간단한 프롬프트가 표시됩니다.

참고: 자리 표시자 속성은 텍스트, 검색, URL, 전화, 이메일 및 비밀번호 유형의 <input>에 적용됩니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
  <input type="submit">
</form>

<p><strong>注意:</strong>  Internet Explorer 9及更早IE版本，或Safari不支持input标签的 pattern 属性。</p>

</body>
</html>

인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요


<input> 필수 속성

필수 속성은 부울 속성입니다.

필수 속성은 제출 전에 입력 필드를 채워야 함을 지정합니다. (비워둘 수 없습니다).

참고: 필수 속성은 텍스트, 검색, URL, 전화, 이메일, 비밀번호, 날짜 선택기, 숫자, 확인란, 라디오 및 태그 유형에 적용됩니다. 파일.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  <input type="text" name="fname" placeholder="First name"><br>
  <input type="text" name="lname" placeholder="Last name"><br>
  <input type="submit" value="提交">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本不支持input标签的 placeholder 属性。</p>

</body>
</html>

인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요


<input> 단계 속성

단계 속성은 입력 필드의 유효한 숫자 간격을 지정합니다.

step="3"인 경우 유효한 숫자는 -3, 0, 3, 6 등입니다.

팁: step 속성은 다음과 함께 사용할 수 있습니다. 최대 및 최소 속성은 범위 값을 생성합니다.

참고: 단계 속성은 숫자, 범위, 날짜, 날짜/시간, 날짜/시간-로컬, 월, 시간 및 유형과 함께 사용됩니다.

인스턴스

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<form action="demo-form.php">
  Username: <input type="text" name="usrname" required>
  <input type="submit">
</form>

<p><strong>注意：</strong> Internet Explorer 9及更早IE版本，或Safari不支持input标签的 required 属性。</p>

</body>
</html>

인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

HTML5 <input> 태그

标签描述
<form>定义一个form表单
<input>定义一个 input 域
←
→