Home > Web Front-end > JS Tutorial > Some basic usage and techniques of forms

Some basic usage and techniques of forms

巴扎黑
Release: 2017-05-21 11:36:15
Original
1471 people have browsed it

1. Use images instead of submit buttons
When there is only one submit button, it can be easily implemented without adding an event function. The code is:

<input type="image" name="..." src="url" width="" height="..." border="...">
Copy after login

Except for changing the label to input type Except for ="image", other attributes are the same as those of the tag.

2. Use pictures to replace all form buttons:
The code format of the image code that replaces the submit button is

<input type="image" name="..." src="..." onClick="document.formName.submit()">
Copy after login

The code image format that replaces the reset button is

<input type="image" name="..." src="..." onClick="document.formName.reset()">
Copy after login

Note: The formName here is the name attribute value of the form.

3. Form submission verification:

<script>
 function CheckDate(){
 //取得输入的数据
 userName = document.RedForm.userName.value;
 userEmail = document.RedForm.userEmail.value;
 //如果没有输入姓名
 if (userName=="") {
 alert("请输入姓名");
 document.RedForm.userName.focus();
 return false;
 }else{
 //如果没有输入Email,或者Email地址错误(不含@)
 if ((userEmail=="")||(userEmail.indexOf("@")==-1)) {alert("请重新输入Email地址");
 document.RedForm.userEmail.focus();
 return false;
 }else return true;
 }
 }
 </script>
Copy after login

4. Submit the form with any element:
Through onClick="document.form.submit();" To submit the form; use onClick="document.form.reset();" to reset the form, so that any element can submit the form.

The above is the detailed content of Some basic usage and techniques of forms. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template