HTML5 새로운 양식 속성에 대한 자세한 설명-H5 튜토리얼-php.cn

autocomplete(자동 완성)

新的表单元素

datalist

keygen" >keygen

output" >output

집

웹 프론트엔드

H5 튜토리얼

HTML5 새로운 양식 속성에 대한 자세한 설명

零下一度

May 06, 2017 am 11:52 AM

새 양식속성

w3cschool-h5 양식 속성을 참조하여 가장 완전한 양식 속성을 얻을 수 있습니다. 여기서는 공통 속성만 설명합니다

autocomplete(자동 완성)

사용자의 입력을 녹음하고 프롬프트를 표시하는 역할입니다. autocomplete

값:

켜짐: 켜짐
꺼짐: 꺼짐

적용 범위:

은 일반적으로
입력 태그

샘플 코드:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" >
    <input type="text" autocomplete="on" name="userName">
    <input type="submit">
</form>
</body>
</html>

로그인 후 복사

사용 참고 사항:

태그에
속성을 추가해야 합니다name
프롬프트는 한 번 제출한 후에만 나타납니다

자동 초점(포커스 가져오기)

페이지에 입력할 요소가 많은 경우 사용자는 입력할 요소를 마우스로 클릭해야 사용자 경험을 향상할 수 있습니다. ,
속성을 사용하여 페이지에서 기본으로 선택된 요소를 지정하려면 autofocus

사용법:

필요한 것
초점을 얻으려면 속성만 추가하면 됩니다. 表单元素
할당은 필요하지 않습니다. 속성만 추가하면 됩니다. 샘플 코드를 참조하세요.

샘플 코드:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<form action="" >
  姓名:<input type="text"  name="userName">
  <br/>
  年龄<input type="number" name="telNum" autofocus>
  <input type="submit">
</form>
</body>
</html>

로그인 후 복사

사용 참고 사항:

이 속성 이전에 <a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript를 사용할 수 있습니다. 요소를 지정하는 <p><a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript</a>
페이지의 여러 요소에 이 속성이 설정된 경우 마지막 요소에 초점이 맞춰집니다

form(form 연관)

데이터를 제출하려면 해당
태그에 表单元素을 넣어야 합니다. form는 더 이상 表单元素

의 제약을 받지 않습니다. 사용법:

을 사용하여 表单外 요소를 생성하려면 요소에 该表单 속성을 추가하고 form="表单id"表单id와 연결하려는
에 설정하기만 하면 됩니다.

샘플 코드

취미의
태그와 ID를 양식 외부에 입력하여 <🎜과의 관계를 설정하도록 합니다. > 양식 inputuserForm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" id="userForm" >
    姓名:<input type="text"  name="userName">
    <br/>
    年龄:<input type="number" name="telNum" autofocus>
    <br/>
    <input type="submit">
</form>

<br/>
爱好:<input type="text" name="habbit" form="userForm">
</body>
</html>

로그인 후 복사

사용 참고:

태그에서 여러 값을 선택하려면 이 속성을 사용할 수 있습니다
input

적용 가능한 상황:

<a href= 유형의 태그에서 사용할 수 있습니다. "http://www.php.cn/wiki/1313.html" target="_blank">파일<li>

<a href="http://www.php.cn/wiki/1313.html" target="_blank">file</a>

버튼을 길게 눌러야 합니다ctrl
```
<input type="file" multiple >
```
로그인 후 복사

일부 프롬프트 정보는 기본적으로 입력 요소에 표시되며, 이는 사용자 입력 후 자동으로 사라집니다. 이 효과를 얻으려면

을 사용해야 합니다. 속성
이 나타남 JavaScriptplaceholder

사용법:

적용 가능한 상황:

JavaScript

샘플 코드 사용 안 함:

placeholder.png

显示效果如下

<input type="text"placeholder="输入用户名">

로그인 후 복사

新的表单元素

除了在input标签中增加了一些新的type属性以外,H5也推出了一些新的表单元素,由于浏览器的兼容问题,使用频率并不广,了解即可 w3cSchool_新表单元素

datalist

该元素规定了输入区域的选项列表,可以让用户有一些选项

测试代码:

注:测试代码只是body内部的代码

网址:<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
    <option label="W3School" value="http://www.W3School.com.cn"/>
    <option label="Google" value="http://www.google.com"/>
    <option label="Microsoft" value="http://www.microsoft.com"/>
</datalist>

电话: <input type="tel" list="tel_list">
<datalist id="tel_list">
    <option value="186xxx" label="移动">移动</option>
    <option value="187xxx" label="联通">联通</option>
    <option value="135xxx" label="天翼">天翼</option>
</datalist>

로그인 후 복사

datalist:

id:id属性,想要使用该datalist的元素需要通过list=id的方式来指定

option:

value:指定具体的值
label:提示信息

注意:

如果input的type为url,option中对应的value需要使用http://开始

keygen

keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate），即实现非对称加密
目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。