H5 및 CSS3 양식 유효성 검사 사용에 대한 튜토리얼-CSS 튜토리얼-php.cn

H5 및 CSS3 양식 유효성 검사 사용에 대한 튜토리얼

Y2J

풀어 주다： 2017-05-22 11:31:46

원래의

1799명이 탐색했습니다.

이 글에서는 주로 HTML5와 CSS3 양식 확인 기능의 사용법을 소개합니다. 필요한 친구들은 참고하면 됩니다.

클라이언트 측 확인은 웹 클라이언트 프로그램에서 가장 일반적으로 사용되는 기능 중 하나입니다. 다양하게 사용됨 다양한 js 라이브러리가 양식 검증에 사용됩니다. HTML5는 실제로 이미 양식 유효성 검사 기능을 제공합니다. 인기가 없는 이유는 호환성 문제도 있고, 스타일이 너무 못생겼기 때문일 수도 있습니다.

아래에서는 HTML과 CSS만 사용하여 HTML5 및 CSS3 양식 유효성 검사를 단계별로 만듭니다.

완성된 내용은 다음과 같습니다.

1단계: 유효성 검사 필드 및 유형 구성

먼저 다음 필드가 필요합니다.

이름(성명)
전화번호(전화번호)
이메일 주소(email address)
웹사이트(website)

사용자가 일부 정보를 입력한 후 사용자 정보를 확인해야 합니다. 잘못된 데이터와 사기성 데이터가 서버에 전달되는 것을 방지하려면 올바른 조치를 취하세요.

HTML5의 새로운 사양에서는 입력 입력 상자가 전화, 이메일, 번호, 범위, 색상 등과 같은 다양한 입력 유형을 제공합니다. 이러한 유형은 일반적으로 데스크톱 클라이언트에서는 그다지 명확하지 않습니다. 모바일 키보드에서는 더욱 분명해집니다. 예를 들어 모바일 키보드에서는 숫자가 자동으로 순수 숫자로 전환되고, 이메일 키보드는 @가 있는 키보드로 자동 전환됩니다.

2단계: 양식 스타일 결정

또한 양식의 최종 스타일을 결정해야 합니다. 일반적으로 이 작업은 디자이너에게서 나옵니다. 이번에는 데모 스타일로 Dribbble에서 양식 스타일을 찾았습니다.

3단계: 템플릿 코드

표준 HTML5 선언 코드 사용

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML5 Form Validation</title>
</head>
<body>
</body>
</html>

로그인 후 복사

섹션 4단계 : 양식 만들기

기본 양식 요소를 만듭니다. 여기서는 데이터를 제출하지 않고 단지 데모일 뿐이므로 양식이 제출되지 않습니다.

<form action="" onsubmit="return false">
</form>

로그인 후 복사

5단계: 양식 요소 만들기

양식 요소는 다음 요소로 구성됩니다.

ul
li
라벨
입력
span

ul 및 li 요소는 조판 및 레이아웃에 사용되며 양식 요소와 레이아웃을 구분하는 데 사용됩니다. 레이블은 양식 필드 프롬프트 텍스트에 사용됩니다. 입력은 사용자가 데이터를 입력하는 데 사용됩니다. 스팬은 이모티콘을 사용하여 필드가 올바르게 채워졌는지 사용자에게 묻는 데 사용됩니다.

<ul>
    <li>
      <label for="name">FULL NAME</label>
      <input type="text" id="name" name="
    name" placeholder="请输入姓名"/>
      <span class="icon-name"></span>
    </li>
</ul>

로그인 후 복사

양식 양식 html 코드 완성 코드는 다음과 같습니다.

6단계: 스타일 추가

양식 완성 요소를 작성할 때 스타일을 개선하여 더욱 아름답게 보이도록 하는 데 중점을 둡니다.

body {
  display: flex;
}
form {
  padding: 0 10%;
  width: 100%;
  margin: auto;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  position: relative;
  margin-bottom: 20px;
}
label {
  color: #333;
  display: block;
  font-size: 12px;
}
input {
  width: 100%;
  outline: none;
  border: none;
  padding: 0.5em 0;
  font-size: 14px;
  color: black;
  position: relative;
  border-bottom: 1px solid #d4d4d4;
}
input:-moz-placeholder {
  color: #d4d4d4;
}
input::-webkit-input-placeholder {
  color: #d4d4d4;
}
li span {
  display: block;
  position: absolute;
  right: 0;
  top: 10px;
  font-size: 28px;
}
button {
  cursor: pointer;
  border: 1px solid #999;
  border-radius: 4px;
  padding: 10px 20px;
  margin-top: 10px;
  background: #fff;
}

로그인 후 복사

css 코드 완성 코드는 다음과 같습니다.

7단계: 각각에 EMOJI 프롬프트

를 추가합니다. 양식 구조에 범위 태그를 추가했습니다. 예를 들어 이름 필드에 태그를 추가했습니다. 이제 유효성 검사 필드의 상태를 표시하는 스타일을 추가하세요.

li span {
  display: block;
  position: absolute;
  right: 0;
  top: 10px;
  font-size: 28px;
}
/*默认的是一个微笑的表情*/
li span::before {
  content: &#39;

로그인 후 복사

[관련 추천]

1. CSS3 무료 동영상 튜토리얼

CSS3 유사 요소를 통해 점차 빛나는 테두리 완성 자세한 코드 설명

3. CSS3의 이미지 로우폴리 애니메이션 효과 완성 과정에 대한 자세한 설명

4. CSS를 사용한 표준 원형 패턴

CSS를 사용하여 텍스트 하이퍼링크를 구현하고 텍스트 오른쪽에 화살표 아이콘을 추가합니다

위 내용은 H5 및 CSS3 양식 유효성 검사 사용에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!