HTML学习记录2021.06.03-CSDN博客

本文链接：https://blog.csdn.net/Stan_lu/article/details/117523278

1. <form>

<form>的参数：

name: 用于在 <script> 中访问特定<form>

method: 与服务器端的连接方式（post或get）

action: 指定处理此 <form> 中数据的 <script> 的URL

获取<form>对象：

通过name参数：

<form name="myForm">
document.myForm

通过forms数组：

<form name="myForm">
document.forms[0]

<form>中常用的标签：

button：

<input type="button" name="myButton" value="Button" onclick="myButton_onclick()" />
<input type="submit" name="submit1" value="Submit">
<input type="reset" name="reset1" value="Reset">

text：

<input type="text" name="txtName" onchange="txtName_onchange()" />
<input type="password" name="password1">
<input type="hidden" name="myHiddenElement">

textarea：

<textarea rows="15" cols="40" name="textarea1" 
    onchange="DisplayEvent('onchange\n');" 
    onkeydown="DisplayEvent('onkeydown\n');" 
    onkeypress="DisplayEvent('onkeypress\n');" 
    onkeyup="DisplayEvent('onkeyup\n\n');"></textarea>

checkbox：

<input name="chkGlobal" type="checkbox" id="chkGlobal" value="true" />

radio：

<label><input name="Fruit" type="radio" value="" />苹果 </label>

select：

<select name="theDay" size="5">
            <option value="0" selected="selected">Monday</option>
            <option value="1">Tuesday</option>
            <option value="2">Wednesday</option>
            <option value="3">Thursday</option>
            <option value="4">Friday</option>
            <option value="5">Saturday</option>
            <option value="6">Sunday</option>
        </select>

2. text内容检测

具体见注释

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Chapter 7: Example 4</title>
    <script type="text/javascript">
    function btnCheckForm_onclick()
    {
        var myForm = document.form1;
        // find the element with empty value
        if (myForm.txtAge.value == "" || myForm.txtName.value == "")
        {
            alert("Please complete all the form");
            if (myForm.txtName.value == "")
            {
                myForm.txtName.focus();
            }
            else
            {
                myForm.txtAge.focus();
            }
        }
        else
        {
            alert("Thanks for completing the form " + myForm.txtName.value);
        }
    }
    
    function txtAge_onblur()
    {   // check value of age whether number
        var txtAge = document.form1.txtAge;
        if (isNaN(txtAge.value) == true)
        {
            alert("Please enter a valid age");
            txtAge.focus();
            txtAge.select();
        }
    }
    
    function txtName_onchange()
    {
        window.status = "Hi " + document.form1.txtName.value;
    }
    </script>
</head>
<body>
    <form action="" name="form1">
        Please enter the following details:
        <p>
            Name:
            <br />
            <input type="text" name="txtName" onchange="txtName_onchange()" />
        </p>
        <p>
            Age:
            <br />
            <input type="text" name="txtAge" onchange="txtAge_onblur()" 
                size="3" maxlength="3" />
        </p>
        <p>
            <input type="button" value="Check Details" 
                name="btnCheckForm" onclick="btnCheckForm_onclick()">
        </p>
    </form>
</body>
</html>