简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

HTML의 양식 및 양식 제출 작업 방법 요약

小云云
풀어 주다： 2017-12-11 10:10:58
원래의
3135명이 탐색했습니다.

이 글은 주로 HTML의 양식 요소와 양식 제출에 대한 지식을 소개합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

form 요소

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


를 재정의합니다. 을 재정의합니다.
속성 값 Description
accept-charset 서버가 처리할 수 있는 문자 집합, 여러 문자 집합은 공백으로 구분됩니다.
action 요청을 수락할 URL, 이 값이 포함될 수 있습니다. 양식 요소 입력 또는 버튼 요소의 formaction 속성은 양식 요소의 입력 또는 버튼 요소에서 요청한 인코딩 유형을 재정의합니다. 속성은
length 양식의 컨트롤 수
method보낼 HTTP 요청 유형(일반적으로 "get" 또는 "post"). 이 값은 양식 요소의 입력 또는 버튼 요소에 전달될 수 있습니다. formmethod 속성은
name 양식 이름
reset() 모든 양식 필드를 기본값으로 재설정합니다. ​​
submit() submits the form
target 요청을 보내고 응답을 받는 데 사용되는 창의 이름입니다. 이 값은 양식 요소의 입력 또는 버튼 요소의 formtarget 속성으로 재정의될 수 있습니다
autocomplete 양식 요소를 자동으로 완성할지 여부

입력 요소

입력 요소는 유형 속성의 값에 따라 매우 널리 사용되는 양식 요소입니다.

텍스트 입력 제출 입력
라디오 버튼 입력
체크박스 입력< ;input type="checkbox" name="같은 이름" value="해당 값이 다름">
숫자 입력범위 입력 숫자와 유사하지만 입력 상자 대신 슬라이더가 표시됩니다.
색상 입력 색상 선택기가 나타납니다.
날짜 입력 날짜 선택기가 나타납니다.
이메일 입력 이 텍스트 입력 상자로 표시되고 맞춤 키보드가 나타납니다.
tel 입력 은 이메일 입력과 유사합니다.
url 입력 은 이메일 입력과 유사하며 사용자 정의 키보드가 나타납니다.
textarea 요소는 여러 줄의 텍스트 영역을 만들 수 있습니다.

cols와 row의 속성값은 ​​​​문자열의 너비와 높이를 나타냅니다. 각각 텍스트 영역.
선택 요소와 옵션 요소가 함께 사용되어 드롭다운 메뉴를 만듭니다.

radio

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

예:

게임하기
코드 쓰기

남성
여성,
라디오 2세트입니다

placeholder

기대되는 가치를 설명하는 프롬프트 정보를 제공하세요 입력 필드(힌트).
입력 필드가 비어 있으면 프롬프트가 나타나고 해당 필드에 초점이 맞춰지면 사라집니다.

type=hidden

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

제출 버튼

양식에 제출 버튼을 추가하면 사용자가 양식을 제출할 수 있습니다.

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

<input type="submit" />
<button type="submit"></button>
<input type="image" />
로그인 후 복사

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

submit 이벤트

초보자는 제출 버튼의 클릭 이벤트에 의해 양식 제출이 발생한다고 생각할 수 있습니다. 실제로는 버튼 요소의 클릭 이벤트와 양식의 제출 이벤트가 실행됩니다. 브라우저마다 순서가 다르기 때문에 양식 제출 이벤트를 정확하게 제어하기 위해 양식 제출 이벤트에서 확인 및 기타 작업을 수행하도록 선택합니다. 

form.addEventListener(&#39;submit&#39;, function (e) {
  if (valid()) {
    ...
  } 
  e.preventDefault()
})
로그인 후 복사

양식 요소에 위 세 가지 버튼 중 하나라도 없으면 사용자는 양식을 제출할 수 없습니다(이 때 Enter 키도 유효하지 않습니다). 양식 요소를 사용할 수 있습니다. submit()方法执行提交表单，需要注意的是调用submit()方法并不会触发form元素的submit事件，表单的验证等操作应该在调用submit()

if (valid()) {
  form.submit()
}
로그인 후 복사

양식 제출 및 사용자 경험

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

JavaScript 양식 유효성 검사

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

JavaScript로 검증된 일반적인 양식 데이터는 다음과 같습니다.

用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域 (numeric field) 中输入了文本？
必填（或必选）项目

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false}
else {return true}
}
}
로그인 후 복사

下面是连同 HTML 表单的代码：

<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>
로그인 후 복사

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}
로그인 후 복사

下面是连同 HTML 表单的完整代码：









Email:
로그인 후 복사

快捷键提交

在没有form元素包裹的情况下，即使当前页面的焦点在表单元素上，按回车键也不会触发表单提交，对于用户而言，需要从键盘控制切换到鼠标/手势控制，破坏了原有的流畅度。解决方法最简单的就是在外层用一个form元素包裹，并且确定form元素中起码有一个提交按钮。此时当表单中的输入域得到焦点时，用户按回车键便会触发提交。

浏览器记住账号密码

在提交表单时，高级浏览器包括移动端浏览器，会询问用户是否需要记住用户账号密码，对于一般用户而言，这是一个十分有用的特性，特别是在移动端，可以为用户节省很多时间。在没有form元素的情况下，浏览器不会弹出该询问窗口。

我们在开发一个表单应用的时候，不应该尝试去除form元素直接进行提交，在form元素中应该包含一个提交按钮，如果是button元素，应该手动加上type="submit"属性。提交事件的处理在form元素的submit事件中，而非提交按钮的click事件。

相关推荐：

html中Form表单提交时页面不跳转的方法详解

序列化form表单教程详解

有关jquery中form表单序列化的一些问题指导

위 내용은 HTML의 양식 및 양식 제출 작업 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
form html 操作
원천：php.cn
이전 기사：HTML 웹 페이지에 비디오를 삽입하는 방법을 요약합니다. 다음 기사：HTML에서 마우스가 멈췄을 때 전체 줄(tr)의 색상을 변경하는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
PX가 REM 오류로 자동 변환  <style>html {   글꼴 크기: calc(100vw / 3.75);      }body {    글꼴 크기: 0.16rem;      }&l...
에서 2024-04-16 09:34:16
0
0
4687
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
Livewire 게으른 자리 표시자와 함께 laravel 구성 요소를 사용하는 방법 livewire3 자리 표시자 안에 내 laravel 구성 요소의 뼈대를 추가하고 싶습니다. 지금까지 시도한 작업: Laravel 구성 요소를 포함하는 Livew...
에서 2024-04-06 20:02:10
0
2
543
문자열을 HTML 코드(배열에서 생성됨)로 바꾸는 최상위 방법 다음과 같은 문자열이 주어지면...$htmlPattern="Usernameis:#name#andusercompanyis#company#";하위 ...
에서 2024-04-06 17:40:41
0
2
410
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！