집 >웹 프론트엔드 >HTML 튜토리얼 >HTML에서 HTML 양식 제출을 사용하는 방법

HTML에서 HTML 양식 제출을 사용하는 방법

php中世界最好的语言원래의: 2018-01-17 09:27:354190검색

이번에는 HTML에서 html 양식 제출을 사용하는 방법을 보여드리겠습니다. html 양식 제출 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

여기에서는 양식 요소 및 양식 제출에 대한 지식을 소개합니다.

form 요소

form 요소의 DOM 인터페이스는 HTMLElement에서 상속되는 HTMLFormElement이므로 다른 HTML 요소와 동일한 기본 속성을 가지지만 몇 가지 고유한 속성 및 메서드도 있습니다.

속성 값

Description

accept-charset 서버가 처리할 수 있는 문자 집합입니다. 여러 문자 집합은 공백으로 구분됩니다.

action 요청을 수락하는 URL입니다. formaction 속성은

elements 양식의 모든 컨트롤 컬렉션(HTMLCollection)을 재정의합니다.

enctype 요청된 인코딩 유형, 이 값은 양식 요소의 입력 또는 formenctype 속성에 의해 재정의될 수 있습니다. 버튼 요소

length 양식

method의 컨트롤 수 전송된 HTTP 요청 유형 으로, 일반적으로 "get" 또는 "post"이며, 이 값은 양식 요소의 입력 또는 다음의 formmethod 속성으로 재정의될 수 있습니다. 버튼 요소

name 양식 이름

reset() 모든 양식 필드 재설정 기본값으로 설정

submit() 양식 제출

target 요청을 보내고 응답을 받는 데 사용되는 창 이름은 다음으로 재정의될 수 있습니다. form 요소의 input 또는 버튼 요소의 formtarget 속성

autocomplete 양식 요소의 자동 완성 여부

input 요소

input 요소는 type 속성의 값에 따라 매우 널리 사용되는 form 요소입니다. 다음과 같은 일반적인 용도가 있습니다:

텍스트 입력9c0277ee990771d30fd543a38aca6c0e
입력 제출54b28e0e73a12e4a8ed487872a6fb5b8
라디오 버튼 입력97eeb9fe5fefa02ad03c4e9a87bf1e0f
체크박스 입력 451b29fa728432c2090d605170b7da6c
숫자 입력b7eb3933c54dcd40f33dea3ec8241d7f 입력 상자에는 최대값과 최소값을 설정하는 숫자만 입력할 수 있습니다.
범위 입력 7a4313034c807dc840f651e5c24969b6 숫자와 유사하지만 입력 상자 대신 슬라이더가 표시됩니다.
색상 입력d0335cf169d1c69d5fb760bfbec3b54d 색상 선택기가 나타납니다.
날짜 입력6e290236d7c77fdce98cb15bf0dfeea2이 날짜 선택기 팝업으로 표시됩니다.
이메일 입력 e8dc7451c84937575e38c52150e3cc83이 텍스트 입력 상자로 표시되고 맞춤 키보드가 나타납니다.
tel 입력 85f46f0e8aaaa3b9a68adb2fc5e483a4은 이메일 입력과 유사합니다.
url 입력 b62e2bff68c9b56c3471a9e06cd94f80은 이메일 입력과 유사하며 사용자 정의 키보드가 나타납니다.
textarea 요소는 여러 줄의 텍스트 영역을 만들 수 있습니다.
8d2d6ea93d461bde1c86bcce322d1acb40587128eee8df8f03d0b607fe983014
cols와 row의 속성값은 문자열의 너비와 높이를 나타냅니다. 각각 텍스트 영역.
선택 요소와 옵션 요소가 함께 사용되어 드롭다운 메뉴를 만듭니다.
701d81aaa14b8afd38d7545721c937f2 6799bcf3da825979e5e04313a71933254afa15d3069109ac30911f04c56f3338 6799bcf3da825979e5e04313a71933254afa15d3069109ac30911f04c56f3338 ;4afa15d3069109ac30911f04c56f3338 18bb6ffaf0152bbe49cd8a3620346341

radio

그룹화하는 방법은 다른 이름 속성으로 설정하세요

예:

f18a0d7dbbdb1dd011d42a115bf3c61d게임하기
753db45297616099de92bade28ac4cb7코드 쓰기

c179a68332954c65bd5a26509d7f8801 Male
a4353ce1cb381171d2d6de3681550745여성,
이것은 입력 필드의 예상 값을 설명하는 힌트를 제공하는 두 세트의 radio

placeholder

입니다.
입력 필드가 비어 있으면 프롬프트가 나타나고 해당 필드에 초점이 맞춰지면 사라집니다.

type=hidden

은 숨겨진 입력을 정의합니다. 숨겨진 필드는 사용자에게 표시되지 않습니다. 숨겨진 필드에는 일반적으로 기본값이 저장되며 해당 값은 JavaScript로 수정될 수도 있습니다.
예를 들어 보안 목적으로 사용되며, 사용자에게 보이지 않는 이름 및 값 값을 백그라운드로 전송하고, 페이지 위조를 방지하기 위해 백그라운드에서 검증을 수행할 수 있도록 합니다.

제출 버튼

사용자가 양식을 제출할 수 있도록 양식에 제출 버튼을 추가하세요.

다음 세 개의 버튼은 클릭 시 양식의 제출 이벤트를 트리거할 수 있습니다.

<input type="submit" />
<button type="submit"></button>
<input type="image" />

사양에서 버튼 요소 유형의 기본값은 submit이지만 IE678에서는 기본값이 버튼이므로 호환성상의 이유로 버튼 요소 type="submit" 속성을 수동으로 추가하세요.

submit 이벤트

초보자는 submit 버튼의 클릭 이벤트에 의해 form submit이 발생한다고 생각할 수도 있다. 실제로는 버튼 요소의 click 이벤트와 form의 submit 이벤트가 다르게 실행된다. 다양한 브라우저에서 주문하므로 양식 제출 이벤트를 정확하게 제어하기 위해 양식의 제출 이벤트에서 확인과 같은 작업을 수행하도록 선택합니다.

form.addEventListener(&#39;submit&#39;, function (e) {
  if (valid()) {
    ...
  }
  e.preventDefault()
})

양식 요소에 위 세 가지 버튼 중 하나라도 없으면 사용자는 양식을 제출할 수 없습니다. (Enter 키도 유효하지 않습니다. 이때 고유한 submit() 메소드를 사용할 수 있습니다. 중요한 점은 submit() 메소드를 호출해도 양식 요소의 제출 이벤트가 트리거되지 않는다는 점입니다. submit() 메소드를 호출하기 전에 양식 확인 및 기타 작업이 수행되어야 합니다.

if (valid()) {
  form.submit()
}

양식 제출 및 사용자 경험

널리 사용되는 ajax + CORS(교차 도메인 POST) 기술을 기반으로 양식 요소를 사용하지 않고 서버에 직접 데이터를 제출할 가능성이 높습니다. 이것이 작동하는 동안 대부분의 경우 경험이 저하됩니다.

JavaScript 양식 유효성 검사

JavaScript는 데이터가 서버로 전송되기 전에 HTML 양식에서 이러한 입력 데이터의 유효성을 검사하는 데 사용할 수 있습니다.

JavaScript로 확인되는 일반적인 양식 데이터는 다음과 같습니다.

사용자가 양식의 필수 필드를 입력했습니까?
사용자가 입력한 이메일 주소가 합법적인가요?
사용자가 유효한 날짜를 입력했습니까?
사용자가 숫자 필드에 텍스트를 입력했습니까?
필수(또는 필수) 항목

다음 기능은 사용자가 양식에 필수(또는 필수) 항목을 입력했는지 확인하는 데 사용됩니다. 해당 필드가 필수이거나 필수 필드가 비어 있으면 경고 상자가 나타나고 function의 반환 값은 false이고, 그렇지 않으면 함수의 반환 값이 true입니다(데이터에 문제가 없음을 의미). ):

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false}
else {return true}
}
}

<html>
<head>
<script type="text/javascript">
 
function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {alert(alerttxt);return false}
  else {return true}
  }
}
 
function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
    {email.focus();return false}
  }
}
</script>
</head>
 
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
 
</html>

이 사례를 읽어보셨을 것입니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!