六、表单及表单应用【重点】

1、初识表单post和get提交

1.1、表单语法

1.2、表单元素格式

文本输入框
密码框
单选框
多选框
按钮
下拉框
文本域
文件域
邮箱验证
网址验证
数字验证
滑块
搜索框

 <form action="#" method="post">
    <!--文本输入框：input type="text"
    value="我很帅" 默认初始值
    maxlength="8" 最长能写几个字符
    size="30"     文本框的长度-->
    <p>名字：<input type="text" name="username" placeholder="请输入姓名"></p>
    <!--密码框 input type="password"-->
    <p>密码：<input type="password" name="pwd" placeholder="请输入密码"></p>
    <!--单选框标签
    checked表示默认选中
    input type="radio"
    value="boy" 表示单选框的值
    name="sex"  组，单选框的组必须相同
    -->
    <p>性别：
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>
    <!--多选框
    input type="checkbox"
    -->
    <p>爱好：
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>敲代码
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏

    </p>
    <!--按钮-->
    <p>
        <input type="button" name="btn1" value="点击变长">
    <!--图片按钮-->
        <input type="image" src="../resources/images/1.jpg">
    </p>
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>
    <!--下拉框，列表框
    selected表示默认选中
    -->
    <p>国家：
        <select name="列表名称" id="">
            <option value="china">中国</option>
            <option value="usa">美国</option>
            <option value="eth" selected>瑞士</option>
            <option value="english">英国</option>
        </select>
    </p>
    <!--文本域
    cols="30" rows="10" 表示行跟列
    placeholder="请输入您的意见与建议"
    -->
    <p>反馈：
        <textarea name="textarea" id="" cols="30" rows="10" placeholder="请输入您的意见与建议"></textarea>
    </p>
    <!--文件域
    input type="file" name="files" 表示行跟列
    placeholder="请输入您的意见与建议"
    -->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>
<!--邮箱验证-->
    <p>邮箱：
        <input type="email" name="email">
    </p>
    <!--网址验证-->
    <p>URL：
        <input type="url" name="url">
    </p>
    <!--数字验证-->
    <p>商品数量：
        <input type="number" name="number" max="100" min="0" step="1">
    </p>
    <!--滑块-->
    <p>音量：
        <input type="range" name="voice" max="100" min="0" step="2">
    </p>
    <!--搜索框-->
    <p>搜索：
        <input type="search" name="search">
    </p>
</form>

2、表单的应用

disabled：禁用属性
readonly：只读不可进行修改
hidden：隐藏

        <!--增强鼠标可用性，点击文字也可以跳到该属性的文本框内-->
        <label for="mark">你点我试试看</label>
        <input type="text" id="mark">

七、表单初级验证

placeholder=""：提示信息，用于输入框的控件上
required：非空判断
pattern=""：正则表达式
常见的正则表达式

八、其他

1、contenteditable 属性

contenteditable 属性指定元素内容是否可编辑。
在这里插入图片描述
使用

<p contenteditable="true">这是一个段落。是可编辑的。尝试修改文本。</p>

**2、data-* 属性**

data- 属性用于存储私有页面后应用的自定义数据
data- 属性由以下两部分组成：

1.  属性名不要包含大写字母，在 data- 后必须至少有一个字符。
2. 该属性可以是任何字符串

使用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script>
    function showDetails(animal)
    {
      
      
      var animalType = animal.getAttribute("data-animal-type");
      alert("The " + animal.innerHTML + " is a " + animalType + ".");
    }
  </script>
</head>
<body>

<h1>物种</h1>
<p>点击一个物种，看看它是什么类型：</p>

<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>
</ul>

</body>
</html>

九、HTML事件

1、onchange

onchange 属性在元素值改变时触发。

    function checkField(val)
    {
      alert("输入值已改变。新值为: " + val);
    }
<p>修改输入域的文本，点击输入域外区域触发 onchange。</p>
输入文本: <input type="text" name="txt" value="Hello" onchange="checkField(this.value)">

2、onblur

onblur 在元素失去焦点时触发

      function upperCase()
      {
        var x=document.getElementById("fname").value
        document.getElementById("fname").value=x.toUpperCase()
      }
<p>输入您的姓名，然后移动光标/选项卡到输入框外：</p>
输入你的英文姓名（鼠标移开后小写会转换为大写）: <input type="text" name="fname" id="fname" onblur="upperCase()">

3、onrise

onresize 属性在调整窗口大小时触发。

  <script>
    function showMsg()
    {
      
      
      alert("您已经更改了浏览器窗口的大小！");
    }
  </script>
<body onresize="showMsg()">
<p>调整浏览器窗口。</p>

4、onload

onload 属性在文档对象加载完成后触发。

<script>
function load()
{
      
      
    alert("页面已经载入！");
}
</script>
<body onload="load()">
<h1>Hello World!</h1>

5、onfocus

onfocus 属性在元素获得焦点时触发。

<script>
function setStyle(x)
{
      
      
    document.getElementById(x).style.background="yellow";
}
</script>
<p>当输入域获得焦点时setStyle函数被触发。该函数改变输入域的背景色。</p>
第一个名字: <input type="text" id="fname" onfocus="setStyle(this.id)"><br>
最后一个名字: <input type="text" id="lname" onfocus="setStyle(this.id)">

6、onselect

onselect 属性在选取元素文本后触发。

<script>
function showMsg()
{
      
      
    alert("你选取了一些文本信息!");
}
</script>
Some text: <input type="text" value="选取我!!" onselect="showMsg()">
<p>showMsg() 函数在选取输入域文本信息时触发。 该函数弹出了一些信息。</p>

7、onsubmit

onsubmit 属性在表单提交时触发。

<script>
function checkForm()
{
      
      
    alert("提交表单");
}
</script>
<form action="demo_form.php" onsubmit="checkForm()">
第一个名字: <input type="text" name="fname"><br>
最后一个名字: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>
<p> checkForm() 函数在提交按钮被点击时触发。该函数会弹出消息。</p>

8、onkeydown

onkeydown 属性在用户按下按键(在键盘上)时触发。

<script>
function displayResult()
{
      
      
    var x;
    if(window.event) // IE8 及更早IE版本
    {
      
      
        x=event.keyCode;
    }
    else if(event.which) // IE9/Firefox/Chrome/Opera/Safari
    {
      
      
        x=event.which;
    }
    var keychar=String.fromCharCode(x);
    alert("按键 " + keychar + " 被按下");
}
</script>
<p>当用户在输入域按下按键时触发函数。 该功能提醒按下的键。</p>
<input type="text" onkeydown="displayResult()">

9、onkeypress

onkeypress 属性在按下按键时触发。

<!DOCTYPE html>

<script>
function displayResult()
{
     
     
    var x;
    if(window.event) // IE8 及更早IE版本
    {
     
     
        x=event.keyCode;
    }
    else if(event.which) // IE9/Firefox/Chrome/Opera/Safari
    {
     
     
        x=event.which;
    }
    keychar=String.fromCharCode(x);
    alert("按键 " + keychar + " 被按下");
}
</script>

<p>当用户在输入域按下按键时触发函数。 该功能提醒按下的键。</p>
<input type="text" onkeypress="displayResult()">

10、onkeyup

onkeyup 属性在用户松开按键（在键盘上）时触发。

<script>
function displayResult()
{
     
     
    var x=document.getElementById("fname");
    x.value=x.value.toUpperCase();
}
</script>
<p>在输入域松开按键时触发函数。该函数将小写字母转为大写字母。</p>
输入你的名字: <input type="text" id="fname" onkeyup="displayResult()">

11、onclick

onclick 属性在单击鼠标时触发。

<script>
function copyText()
{
     
     
    document.getElementById("field2").value=document.getElementById("field1").value;
}
</script>
</head>
<body>

字段1: <input type="text" id="field1" value="Hello World!"><br>
字段2: <input type="text" id="field2">
<br><br>
<button onclick="copyText()">复制文本</button>

<p>在按钮点击时触发函数。函数将字段1的文字信息复制到字段2。</p>

12、ondblclick

ondblclick 属性在元素上双击鼠标时触发。

<script>
function copyText()
{
     
     
    document.getElementById("field2").value=document.getElementById("field1").value;
}
</script>
字段1: <input type="text" id="field1" value="Hello World!"><br>
字段2: <input type="text" id="field2">
<br><br>
<button ondblclick="copyText()">复制文本</button>
<p>在按钮双击时触发函数。函数将字段1的文字信息复制到字段2。</p>

13、onmousedown

onmousedown 属性在按下鼠标按钮时触发。

<script>
function mouseDown()
{
     
     
    document.getElementById("p1").style.color="red";
}
function mouseUp()
{
     
     
    document.getElementById("p1").style.color="green";
}
</script>
<p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()">
点击文本! 
在鼠标按下时触发 mouseDown()函数，该函数修改文本样式为红色。
在鼠标松开时触发 mouseUp()函数,该函数修改文本样式为绿色。
</p>

14、onmousemove

onmousemove 属性在鼠标指针移动到元素时触发。

<script>
function bigImg(x)
{
     
     
    x.style.height="64px";
    x.style.width="64px";
}

function normalImg(x)
{
     
     
    x.style.height="32px";
    x.style.width="32px";
}
</script>
<img onmousemove="bigImg(this)" onmouseout="normalImg(this)" border="0" src="http://img.php.cn/upload/image/858/817/174/1553759438134026.gif" alt="Smiley" width="32" height="32">
<p>当用户将鼠标移动到图片时触发 bigImg() 函数。该函数使图片变大。</p>
<p>当用户将鼠标移开时触发normalImg() 函数。该函数使图片变回原来大写。</p>

15、onshow

onshow 属性当元素在上下文菜单显示时触发。

<style>
div 
{
     
     
    background: yellow;
    border: 1px solid #cccccc;
    padding: 10px;
}
</style>

<body>
<div contextmenu="mymenu">
<p>用鼠标右键单击黄色框区域查看上下文菜单</p>

<menu type="context" id="mymenu" onshow="myFunction()">
  <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
  <menu label="分享...">
    <menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem>
    <menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
  </menu>
  <menuitem label="发邮件到该页面" onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>
</div>
<p><strong>注意：</strong>目前只有 Firefox 浏览器支持  onshow 属性。</p>
<script>
function myFunction() 
{
     
     
    alert("上下文菜单即将显示");
}
</script>

走进HTML学习二