[php学习九]html的表单练习

最新推荐文章于 2023-12-17 20:20:59 发布

灵眼儿上方

最新推荐文章于 2023-12-17 20:20:59 发布

阅读量551

点赞数

分类专栏： php 文章标签：表单 html

本文链接：https://blog.csdn.net/liyanq528/article/details/51987166

版权

php 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script>
        function showJLB(varID){
            var che = document.getElementById(varID);
            if (che.checked) {
                alert(che.value);
            }
        }
        function showSEX(){
            var sexSign = document.getElementsByName("sex");
            /*定义字符串的时候,一定要先给个初始值,否则初始值为undefined*/
            var values = "";
            for (i = 0;i<sexSign.length;i++){
                values+= sexSign[i].value;
            }
            alert(values);
        }
        function showSEL(selID){
            var sel = document.getElementById(selID);
            alert(sel.value);
        }
    </script>
</head>
<body>

<div id="container" style="width:500px">

    <div id="header" style="background-color:#FFA500;">
        <h1 style="margin-bottom:0;">文章标题</h1></div>
    <!--float属性属于标签的停靠,这个很有用,否则就不好布局了.-->
    <div id="menu" style="background-color:#FFD700;height:500px;width:100px;float: left">
        <b>Menu</b><br>
        菜单1<br>
        菜单2<br>
        菜单3</div>
    <div id="content" style="background-color:#EEEEEE;height:500px;width:400px;float:left;">
        <form>
            <!--radio的name决定了是否一组<br>-->
            <small>单选框</small><br>
            <input οnchange="showSEX()" title="man" type="radio" value="男人" name="sex">man<br>
            <input οnchange="showSEX()" title="woman" type="radio" value="女人" name="sex">woman<br>
            <small>复选框</small><br>
            <input id="d1" title="选择俱乐部" type="checkbox" value="巴萨" οnchange="showJLB(this.id)">巴萨<br>
            <input id="d2" title="选择俱乐部" type="checkbox" value="皇马" οnchange="showJLB(this.id)">皇马<br>
            <small>下拉列表</small><br>
            <select οnchange="showSEL(this.id)" id="SelJLB" title="俱乐部">
                <option value="1">皇家马德里</option>
                <option value="2">巴黎圣日尔曼</option>
                <option value="3">巴塞罗那</option>
            </select><br>
            <small>选项组列表</small><br>
            <select id="grpSel" title="俱乐部" οnchange="showSEL(this.id)">
                <optgroup label="西甲">
                    <option value="1">皇家马德里</option>
                    <option value="2">巴萨罗纳</option>
                </optgroup>
                <optgroup label="英超">
                    <option value="3">切尔西</option>
                    <option value="4">曼联</option>
                </optgroup>
            </select>

        </form>
        <p><small style="font-size: 10px">框架练习-显示百度</small></p>
        <iframe frameborder="0" width=350px height=200px name="_frameTest"></iframe><br>
        <a style="font-size: 10px" href="http://www.baidu.com" target="_frameTest">框架中显示百度</a>
    </div>

    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
        Copyright © W3CSchool.cc</div>

</div>

</body>
</html>

参考：http://www.runoob.com/html/html-scripts.html