HTML5 새로운 양식 속성

HTML5의 새로운 양식 속성

HTML5의 <form> input> 태그에 속성이 추가되었습니다.

자동 완성

검증 없음

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

설정 입력 域

<🎜>

지속적인 학습

새로운 파일

<!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>

제출하다 코드 재설정

자동운전