HTML5 양식 속성 튜토리얼 예

HTML5의 새로운 양식 속성

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

autocomplete
novalidate

새로운 속성:

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

/ 자동 완성 속성

자동 완성 속성은 양식 또는 입력 필드에 자동완성 기능.

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

팁: 자동 완성 속성은 양식 요소에서 활성화될 수 있지만 입력 요소에서는 비활성화될 수 있습니다.

참고: 자동 완성은 태그뿐만 아니라 텍스트, 검색, URL, 전화, 이메일, 비밀번호, 날짜 선택기 등의 태그에서도 작동합니다. 범위 및 색상.

예

HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete ):
<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>

팁: 일부 브라우저에서는 이 속성을 적용하려면 자동 완성 기능을 활성화해야 할 수도 있습니다.

novalidate 속성

novalidate 속성의 부울 속성입니다.

novalidate 속성은 양식을 제출할 때 양식 또는 입력 필드의 유효성을 검사하지 않도록 지정합니다. .

예

제출된 양식 데이터를 확인할 필요가 없습니다

<form action="demo-form.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

autofocus 속성

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

autofocus 속성은 페이지가 로드될 때 필드가 자동으로 포커스를 얻도록 지정합니다.

예

페이지가 로드될 때 "이름" 입력 입력 필드가 자동으로 초점을 맞추도록 합니다.

First name:<input type="text" name="fname" autofocus>

양식 속성

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

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

인스턴스

양식 외부에 있는 입력 필드는 HTML 양식을 참조합니다(입력 양식은 여전히 ​​양식의 일부입니다).

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

formaction 속성은 양식 제출의 URL 주소를 설명하는 데 사용됩니다.

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

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

예

다음 HTMLform 양식에는 주소가 다른 두 개의 제출버튼이 포함되어 있습니다.

<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="Submit"><br>  <input type="submit" formaction="demo-admin.php"  value="Submit as admin"></form>

formenctype 속성

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

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

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

예

첫 번째 제출 버튼에는 양식 데이터를 보내기 위한 기본 인코딩이 있고, 두 번째 제출 버튼에는 "multipart/form-data" 인코딩 형식으로 양식 데이터가 전송됩니다.

<form action="demo-post_enctype.php" method="post">  First name: <input type="text" name="fname"><br>  <input type="submit" value="Submit">  <input type="submit" formenctype="multipart/form-data"  value="Submit as Multipart/form-data"></form>

formmethod 属性

formmethod 属性定义了表单提交的方式。

formmethod 属性覆盖了 元素的的method 属性。

注意: 该属性可以与 type="submit" 和 type="image" 配合使用。

实例

重新定义表单提交方式实例:

<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="Submit">
  <input type="submit" formmethod="post" formaction="demo-post.php"
  value="Submit using POST">
</form>

formnovalidate 属性

novalidate 属性是一个 boolean 属性.

novalidate属性描述了 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖 元素的novalidate属性.

注意: formnovalidate 属性与type="submit一起使用

实例

两个提交按钮的表单(使用与不适用验证 ):

<form action="demo-form.php">  E-mail: <input type="email" name="userid"><br>  <input type="submit" value="Submit"><br>  <input type="submit" formnovalidate value="Submit without validation"></form>

formtarget 属性

formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。

The formtarget 属性覆盖 元素的target属性.

注意: formtarget 属性与type="submit" 和 type="image"配合使用.

实例

两个提交按钮的表单, 在不同窗口中显示:

<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="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>

height 和 width 属性

height 和 width 属性规定用于 image 类型的 标签的图像高度和宽度。

注意: height 和 width 属性只适用于 image 类型的 标签。

提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）。

实例

定义了一个图像提交按钮, 使用了 height 和 width 属性:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

list 属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

实例

在

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

min 和 max 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

注意: min、max 和 step 属性适用于以下类型的 标签：date pickers、number 以及 range。

实例

元素最小值与最大值设置:

Enter a date before 1980-01-01:<input type="date" name="bday" max="1979-12-31">Enter a date after 2000-01-01:<input type="date" name="bday" min="2000-01-02">Quantity (between 1 and 5):<input type="number" name="quantity" min="1" max="5">

multiple 属性

multiple 属性是一个 boolean 属性.

multiple 属性规定 元素中可选择多个值。

注意: multiple 属性适用于以下类型的 标签：email 和 file。: email, and file.

实例

上传多个文件:

Select images: <input type="file" name="img" multiple>

pattern 属性

pattern 属性描述了一个正则表达式用于验证 元素的值。

注意:pattern 属性适用于以下类型的 标签: text, search, url, tel, email, 和 password.

提示： 是用来全局 title 属性描述了模式.

提示： 您可以在我们的 JavaScript 教程中学习到有关正则表达式的内容

实例

下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

注意: placeholder 属性适用于以下类型的 标签：text, search, url, telephone, email 以及 password。

实例

input 字段提示文本t:

<input type="text" name="fname" placeholder="First name">

required 属性

required 属性是一个 boolean 属性.

required 属性规定必须在提交之前填写输入域（不能为空）。

注意:required 属性适用于以下类型的 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

实例

不能为空的input字段:

Username: <input type="text" name="usrname" required>

step 属性

step 属性为输入域规定合法的数字间隔。

如果 step="3"，则合法的数是 -3,0,3,6 等

提示： step 属性可以与 max 和 min 属性创建一个区域值.

注意: step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.

实例

规定input step步长为3:

<input type="number" name="points" step="3">

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费h5在线视频教程

3. php.cn原创html5视频教程

위 내용은 HTML5 양식 속성 튜토리얼 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!