HTML의 양식 및 양식 제출 작업 방법 요약
- 小云云원래의
- 2017-12-11 10:10:583144검색
이 글은 주로 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 | 양식 요소를 자동으로 완성할지 여부 |
|
입력 요소 입력 요소는 유형 속성의 값에 따라 매우 널리 사용되는 양식 요소입니다. 텍스트 입력c14fb89d9add28fe2615cd903c687222 radio 그룹화하는 방법은 다른 이름 속성으로 설정하세요 예: 51f9ea5189091174fb2d681624df7b5d게임하기 485aed515cf0ea17fbc7e4c172741789남성 placeholder 기대되는 가치를 설명하는 프롬프트 정보를 제공하세요 입력 필드(힌트). type=hidden 은 숨겨진 입력을 정의합니다. 숨겨진 필드는 사용자에게 표시되지 않습니다. 숨겨진 필드에는 일반적으로 기본값이 저장되며 해당 값은 JavaScript로 수정될 수도 있습니다. 제출 버튼 양식에 제출 버튼을 추가하면 사용자가 양식을 제출할 수 있습니다. 다음 세 개의 버튼은 클릭 시 양식의 제출 이벤트를 트리거할 수 있습니다. <input type="submit" /> <button type="submit"></button> <input type="image" /> 사양에서 버튼 요소 유형의 기본값은 submit이지만 IE678에서는 기본값이 버튼이므로 호환성을 위해 이유 버튼 요소에 type="submit" 속성을 수동으로 추가해야 합니다. submit 이벤트 초보자는 제출 버튼의 클릭 이벤트에 의해 양식 제출이 발생한다고 생각할 수 있습니다. 실제로는 버튼 요소의 클릭 이벤트와 양식의 제출 이벤트가 실행됩니다. 브라우저마다 순서가 다르기 때문에 양식 제출 이벤트를 정확하게 제어하기 위해 양식 제출 이벤트에서 확인 및 기타 작업을 수행하도록 선택합니다. form.addEventListener('submit', function (e) {
if (valid()) {
...
}
e.preventDefault()
})
양식 요소에 위 세 가지 버튼 중 하나라도 없으면 사용자는 양식을 제출할 수 없습니다(이 때 Enter 키도 유효하지 않습니다). 양식 요소를 사용할 수 있습니다. if (valid()) {
form.submit()
}
양식 제출 및 사용자 경험 널리 사용되는 ajax + CORS(교차 도메인 POST) 기술을 기반으로 양식 요소를 사용하지 않고 서버에 직접 데이터를 제출할 가능성이 높습니다. 이것이 작동하는 동안 대부분의 경우 경험이 저하됩니다.JavaScript 양식 유효성 검사 JavaScript를 사용하면 데이터가 서버로 전송되기 전에 HTML 양식에서 이러한 입력 데이터의 유효성을 검사할 수 있습니다. JavaScript로 검증된 일반적인 양식 데이터는 다음과 같습니다.用户是否已填写表单中的必填项目？ 下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 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 表单的完整代码： 快捷键提交 在没有form元素包裹的情况下，即使当前页面的焦点在表单元素上，按回车键也不会触发表单提交，对于用户而言，需要从键盘控制切换到鼠标/手势控制，破坏了原有的流畅度。解决方法最简单的就是在外层用一个form元素包裹，并且确定form元素中起码有一个提交按钮。此时当表单中的输入域得到焦点时，用户按回车键便会触发提交。 浏览器记住账号密码 在提交表单时，高级浏览器包括移动端浏览器，会询问用户是否需要记住用户账号密码，对于一般用户而言，这是一个十分有用的特性，特别是在移动端，可以为用户节省很多时间。在没有form元素的情况下，浏览器不会弹出该询问窗口。
我们在开发一个表单应用的时候，不应该尝试去除form元素直接进行提交，在form元素中应该包含一个提交按钮，如果是button元素，应该手动加上type="submit"属性。提交事件的处理在form元素的submit事件中，而非提交按钮的click事件。 相关推荐： |
위 내용은 HTML의 양식 및 양식 제출 작업 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!