
2. Write the script
2.1 Python
Step 1: Create a following html file with name html_python.html
.jpg)
Step 2:Create a python file name python.py (match with the name in html form)
.jpg)
Line 1: Specify the location of python.exe
Line 2: Import cgi
Line 4: Define main()
Line 5: Inform the browsers that the information is the text
Line 6: Declare a variable
Line 7-10: If condition to identify whether form "firstname" is null or not. If not null the information will be display, otherwise, the error will display.
Step 3:Press submit button and it is a result
.jpg)
3. Can you modify the script to process the form
Python
Step 1: Create a python file name python_mod.py with the following code

Step 2: Modify html file with this code :form method="post" action="/cgi-bin/python_mod.py"
Step 3: Input the information and press submit. This is the result

4. Improve the user experience by add a Javascript feature
Use JavaScript to confirm you want to submit it or not by code: input type="submit" value="Submit" onclick="return confirm('Are you sure you want to submit?')"

and To validate the field. For example, the field name can not be null.

By insert this code:
function validateName()
{
var str=form1.name.value;
if(str.length==0)
{
alert("The name cannot be empty");
return false;
}
return true;
}
and modify this code in the form1: input name="name" type="text" onBlur="validateName()"
No comments:
Post a Comment