0 0 1 8 - 表单 - 设计你的鱼C选课单

像番茄加两个蛋 · 发表于 2018-4-14 20:08:07

有一个关于label标签问题请求不二老师@不二如是
label标签中的for属性里的值，是对应标签中的name还是id呢？我试了好像只能是id，name好像不行。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <style>
        form {
            text-align: center;
        }
        button {
            outline: none;
            background: none;
            width: 300px;
            height: 100px;
            border-radius: 10px;
            border: 2px solid cornflowerblue;
            font-size: 48px;
            cursor: pointer;
            transition: all 0.4s;
            color: cornflowerblue;
        }
        button:hover {
            background: cornflowerblue;
            color: white;
        }
    </style>
</head>
<body>
<form action="server.php" method="post">
    <p>
        <label>
             姓名：
            <input type="text" name="username" placeholder="请输入您的姓名" autofocus="autofocus" required="required">
        </label>
    </p>
    <p>
        <label>
            电话：
            <input type="tel" name="tel" placeholder="请您输入电话" required="required">
        </label>
    </p>
    <p>
        <label>
            邮箱：
            <input type="email" name="email" placeholder="请您输入邮箱" required="required">
        </label>
    </p>
    <p>
        <label>
            时间：
            <input type="date" name="date" placeholder="请您输入上课时间" required="required">
        </label>
    </p>
    <p>
            性别：
        <input type="radio" name="sex" required="required" value="woman" checked="checked">女
        <input type="radio" name="sex" required="required" value="man">男
    </p>
    <p>
        <label for="class">
            课程：
            <select name="class" id="class">
                <option value="1">C#</option>
                <option value="2">Python</option>
                <option value="3">C++</option>
                <option value="4">HTML5</option>
            </select>
        </label>
    </p>
    <p>
        <label>
            <input type="checkbox" name="rule" required="required">
            遵守相关规定
        </label>
    </p>
    <p>
        <button>提 交</button>
    </p>
</form>
</body>
</html>

华丽转身123 · 发表于 2018-4-30 14:04:29

本帖最后由华丽转身123 于 2018-4-30 14:07 编辑

我也来交作业
******************************************************************
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>0018表单</title>
<style type="text/css">
body{
width: 100%;
}
form{
width: 100%;
height: 100%;
text-align: center;
}

button{
width: 500px;
height: 66px;
}
</style>
</head>
<body>
<form method="post" action="fishc_server.php">
<p>
<lable>姓名:<input type="text" name="Username" placeholder="你的名字" autofocus="autofocus"/></lable>
</p>
<p>
<lable>电话:<input type="text" name="tel" placeholder="你的手机号码"/></lable>
</p>
<p>
<lable>邮箱:<input type="text" name="mail" placeholder="你常用的邮箱"/></lable>
</p>
<p>
<lable>时间:<input type="text" name="time" placeholder="当前时间"/></lable>
</p>
<p>
<lable for="sex">性别</lable>
<input type="radio" name="sex" value="female" checked/>女
<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="other"/>其它
</p>
<lable><input type="checkbox" name="rule" required="required"/>遵守鱼C的规定</lable>
<p><lable for="class">选择课程</lable>
<select name="class">
<option value="1">Scratch</option>
<option value="2">Python</option>
<option value="3">C++</option>
<option value="4">H5</option>
<option value="5">Qt</option>
</select>
</p>
<p ><button>劳斯要提交表单了</button></p>

</form>
</body>

</html>
****************************************************************

隨鈊乄鎍慾 · 发表于 2018-5-25 11:35:58

本帖最后由隨鈊乄鎍慾于 2018-5-25 11:45 编辑

看不二讲段子也不错！

<!DOCTYPG html>
<html>
        <head>
                <meta charset="utf-8"><!--/*五壮士之一：meta*/-->
                <title>18表单</title><!--/*五壮士之一：标题*/-->
                <!--/*五壮士之一：定义文档与外部资源的关系;同时style壮士*/-->
                <!--<link rel="stylesheet" type="text/css" href="0008.css" >-->
        </head>
        <body>
                <div id="sheet" >
                        <form method="pos" action="fishc_server.php" >
                                <p> <label> 姓名：<input type="text" name="username" placeholder="请输入姓名" autofocus="autofocus"> </label> </p>
                                <p> <label> 电话：<input type="tel" name="username" placeholder="有福利我们会极时通知你！" autofocus="autofocus"> </label> </p>
                                <p> <label> 项目：<input type="text" name="username" placeholder="预约项目名称" autofocus="autofocus"> </label> </p>
                                <p> <label> 时间：<input type="data" name="username" placeholder="到店时间" autofocus="autofocus"> </label> </p>
                                <p>

                                        <label for="sex" > 性别：</label>
                                        <input type="radio" name="sex" value="female" checked>女
                                        <input type="radio" name="sex" value="male" >男
                                </p>
                                
                                <p>
                                        <label for="class" >请选择服务项目</label>
                                        <select name="class">
                                                <option value="1">美甲</option>
                                                <option value="1">纹绣</option>
                                                <option value="1">美体</option>
                                                <option value="1">丰胸</option>
                                                <option value="1">祛逗</option>
                                        </select>
                                </p>
                                
                                <p>
                                        <label><input type="checkbox" name="rule" required="required" checked>遵守鱼C相关规定</label>
                                </p>
                                
                                <p align="center">  <button>劳资要交表啦</button> </p>
                                <style>
                                        button{
                                                width:230px;
                                                height:33px;
                                                transform:translateX(6%);
                                        }
                                        
                                </style>
                        </form>
                </div>
                <style>
                        body{
                                background: url(background.jpg) center center;
                                <!--"background-size: cover;"-->
                                margin:0;/*初始化内外边距*/
                                padding:0;
                                position:relative; /*相对定位*/
                                
                        }
                        #sheet{
                                position:absolute;/*绝对定位*/
                                top:50%;
                                width:100%;
                                text-align:center;/*设置文字水平居中*/
                                transform:translateY(-50%);
                        }
                </style>
        </body>
</html>

rock5442107 · 发表于 2018-5-29 01:21:20

<!DOCTYPE html>
<html>
<head>
        <meata charset="UTF-8">
        <title>歡迎來到HTML世界</title>
        <style>
                body{
                        background:url(KED08.jpg);
                        background-size: cover;
                        margin: 0;
                        padding: 0;
                        position: relative;
                }
                p{
                        text-align:center;
                }
                button{
                        width:500px;
                        height:66px;
                }
        </style>
</head>
<body>
        <form method="post" action="fishc_server.php">
                <p><label>姓名：<input type="text" name="username" placeholder="這位大大，您貴姓？" autofocus="autofocus"></label></p>
                <p>
                        <label for="sex">性別：</label>
                        <input type="radio" name="sex" value="female" checked>女
                        <input type="radio" name="sex" value="man">男
                        <input type="radio" name="sex" value="other">其他
                </p>
                <p><label>電話：<input type="text" name="tel" placeholder="輸入您的電話。" required="required"></label></p>
                <p><label>郵箱：<input type="text" name="mail" placeholder="輸入，有福利～"></label></p>
                <p><label>時間：<input type="text" name="date" placeholder="妳何時有空？"></label></p>
                <p>
                        <label for="class">請選擇課程</label>
                        <select name="class">
                        <option value="1">Scratch</option>
                        <option value="2">Python</option>
                        <option value="3">C++</option>
                        <option value="4">HTML5</option>
                        <option value="5">Qt</option>
                        </select>
                </p>
                <p>
                        <label><input type="checkbox" name="rule" required="required">遵守相關規定</label>
                </p>
                <p><button>填完就可以起飛了哦～</button>
        </form>
</body>
</html>

交作业了哦

STmove · 发表于 2018-7-14 23:58:56

交作业啦！

<!doctype html>
<html>
<meta charset="uft-8">
<head>
<title>lesson 0018</title>
</head>

<body>
    <!--这里不是很懂，留存先， 所以我们选用post然后将数据，提交到fishc_server.php页面，请默认这个页面存在哈，代码如下： -->
        <form align="center" method="post" action="fishc_server.php">
                <p><label>姓名：<input type="text" name="username" placeholder="输姓名！" autofocus="autofocus"></label></p >
        <!-- required:'必须的' -->
        <p><label>电话：<input type="tel" name="tel" placeholder="请输入电话号码" required="required"></label></p>
        <p><label>邮箱：<input type="email" name="email" placeholder="输入email有福利"></label></p>
        <p><label>时间：<input type="date" name="date" placeholder="你想何时上课？"></label></p>
        
        <p>
            <label for="sex">性别:</label>
            <input type="radio" name="sex" value="female" checked>女
            <input type="radio" name="sex" value="male">男
            <input type="radio" name="sex" value="other">其他
        </p>
        <p>
            <label for="classes">请选择课程:</label>
            <select name="classes">
                <option value="1">Scratch</option>
                <option value="2">Python</option>
                <option value="3">C++</option>
                <option value="4">HTMLS</option> 
                <option value="5">Qt</option>
                
            </select>
        </p>
        <p>
            <label><input type="checkbox" name="rules" required="required" checked>表示愿意遵守鱼C相关规定</label>
        </p>
    </form>
    <p align="center"><button id="confirm">劳资要<big>交表啦</big></button></p>
    <style>
        button
        {
            width:300px;
            height:66px;
        }
    </style>
</body>
</html>

上帝也幽默 · 发表于 2018-8-20 22:12:18

<!DOCTYPE html>
<html lang='en'>
<head>
<title>test</title>
<meta charset='utf-8'>
<style>
button{
width: 500px;
height: 66px;
}
body{
text-align: center;
position: relative;
}
</style>
</head>
<body>
<form>
<p><label>姓名：<input type='txt'
name='username' placeholder='吾日三省吾身'
autofocus='autofocus'></label></p>
<p><label for='sex'>性别：</label>
<input type='radio' name='sex' checked>女
<input type='radio' name='sex'>男
<input type='radio' name='sex'>其他</p>
<p><label>电话：<input type='tel'
name='username' placeholder='屠龙的勇士成为恶龙'
required='required'></label></p>
<p><label>邮箱：<input type='email'
name='username' placeholder='贪嗔痴'></label></p>
<p><label>时间：<input type='data'
name='username' placeholder='一寸光阴一寸金'></label></p>
<p>
<label for='class'>请选择要体验的内容</label>
<select name='class'>
<option value='1'>性爱</option>
<option value='2'>背叛</option>
<option value='3'>疾病</option>
<option value='4'>知音</option>
<option value='5'>孤独</option>
</select>
</p>
<p><label><input type='checkbox' name='rule'
required='required'></label>同意遵守人生各项协议</p>
<p><button>开始体验</button></p>
</form>
</body>
</html>

船到桥头自然沉 · 发表于 2018-9-5 12:35:46

soulwyb · 发表于 2018-10-14 23:50:55

<!doctype>
<html>

<head></head>

<body>
    <form action="fishc_server.php" method="post">
        <p align="center"><label>姓名：<input type="text" name="username" placeholder="大佬请输入姓名" autofocus="autofocus"></label></p>
        <p align="center"><label>电话：<input type="tel" name="tel" placeholder="输入您的电话，我们的MM不会骚扰你" required="required"></label></p>
        <p align="center"><label>邮箱：<input type="email" name="email" placeholder="输入，有福利"></label></p>
        <p align="center"><label>时间：<input type="date" name="time" placeholder="你想何时上课"></label></p>
        <p align="center">
            <label for="sex">性别：</label>
            <input type="radio" name="sex" value="female" checked>女
            <input type="radio" name="sex" value="male">男
            <input type="radio" name="sex" value="other">其他
        </p>
        <p align="center">
            <label><input type="checkbox" name="rule" required="required">准守鱼C规定</label></p>
        </p>
        <p align="center">
            <label for="class">小天才养殖场</label>
            <select name="class">
                <option value="1">Scratch</option>
                <option value="2">Python</option>
                <option value="3">HTML</option>
                <option value="4">C++</option>
                <option value"5">Qt</option>
            </select>
        </p>
        <p align="center"><button>劳资要交表啦</button></p>
        <style>
            button {
                width: 500px;
                height: 66px;
            }
        </style>


    </form>
</body>

</html>

QiaoaiMen · 发表于 2018-11-14 19:34:08

继续交作业

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>018练习</title>
        <style type="text/css">
                html,body{
                        height: 100%;
                        font-family: sans-serif;
                }
                #xinxi{
                        width: 100%;
                        text-align: center;
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%)
                }
                body{
                        margin: 0;
                        padding: 0;
                        position: relative;
                }
                button{
                                        width: 500px;
                                        height: 66px;
                                        font-size: 44px;
                                }
        </style>
</head>
<body>
        <div id="xinxi">
                <form method="post" action="fishc.php">
                        <p><label>姓名：<input type="text" name="username" placeholder="请输入您的姓名" autofocus="autofocus" required="required"></label></p>
                        <p>
                                <label for="sex">性别：</label>
                                <input type="radio" name="sex" value="female" checked>女
                                <input type="radio" name="sex" value="male">男
                                <input type="radio" name="sex" value="others">其他
                        </p>
                        <p><label>电话：<input type="tel" name="tel" placeholder="请输入11位手机号" required="required"></label></p>
                        <p><label>邮箱：<input type="email" name="email" placeholder="请输入常用邮箱"></label></p>
                        <p><label>日期：<input type="datetime" name="date" placeholder="请输入你期望的上课日期"></label></p>
                        <p>
                                <label for="class">请选择课程</label>
                                <select name="class">
                                        <option value="1">Scratch</option>
                                        <option value="1">Python</option>
                                        <option value="1">C++</option>
                                        <option value="1">HTML5</option>
                                        <option value="1">Qt</option>
                                </select>
                        </p>
                        <p>
                                <label><input type="checkbox" name="rule" required="required">遵守注册守则</label>
                        </p>
                        <p align="center"><button>注 册</button></p>
                </form>
        </div>
</body>
</html>

星海雪的钟爱 · 发表于 2019-2-21 17:45:56

交作业：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单</title>
    <style>
        html{
            margin: 0;
            padding: 0;
            width: 100%;
        }
        body{
           background: url(../../images/bg.jpg) center center;
        }
        form{
            
            width: 100%;
            position: absolute;
            text-align: center;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(30, 11, 55, .2)
            

        }
    </style>
</head>
<body>
    <form action="">
       <p> 
            <label for="username">姓名：
                 <input type="text" name="username" id="user" placeholder="请输入姓名" autofocus='autofocus'>   
            </label>    
       </p>

        <p>
            <label for="sex">性别：</label>
            <input type="radio" name="sex" value="male"><span>男</span>
            <input type="radio" name="sex" value="female" checked='checked'><span>女</span>
        
        </p>
      
        <p><label for="email">邮箱：<input type="email" name="email" required='required'></label></p>
        <p><label for="phone">手机：<input type="tel" name="phone" required='required'></label></p>
        <p><label for="email">时间：<input type="datetime-local" name="time" required='required'></label></p>
        <p>
            <label>请选择课程：
                <select name="course" id="course">
                    <option value="python">Pyhon</option>
                    <option value="java">Java</option>
                    <option value="js">Javascript</option>

                </select>
            </label>

        </p>
        <p><label for="rule"><input type="checkbox">同意本站使用协议</label></p>

        <p>
            <input type="submit" value="提交">
            <input type="reset" value="取消">
        </p>
      


    </form>
</body>
</html>

phszhuli · 发表于 2019-3-29 17:51:50

<!DOCTYPE html>
<head>
        <meta charset="utf-8">
        <title>表单练习</title>
</head>
<body>
        <div id="form">
        <form method="post" action="fishc_server.php" align="center">
        <!--method属性，中用两种提交方式：post & get,post，把数据放在数据体内然后再发给后台，数据不能直接被看到，但是传输数据量大
        get，把数据放在URL中，以明文（可看）的方式发送给后台，传输数据量小，不能传输文件类数据。
        说白了，就是get传输数据，会在目标页面显示用户数据很不安全！

        method，用来指定表单提交数据的方式。

        action，用来指定表单提交的目的页面。-->
        <p><label>姓名：<input type="text" name="username" placeholder="请输入姓名" autofocus="autofocus"></label></p>
        <!--placeholder占位符，起到提示作用-
            autofocus默认自动获得焦点-->
        <p><label>电话：<input type="tel" name="tel" placeholder="请输入电话号码" required="required"></label></p>
        <!--表明用户必须输入一个值，否则无法通过输入验证,必填项-->
        <p><label>邮箱：<input type="email" name="email" placeholder="输入，有福利～"></label></p>
    <p><label>时间：<input type="date" name="date" placeholder="你想何时上课？"></label></p>
        <p>
                <label for="sex">性别：</label>
                <!--因为label和input独立分开，用for进行关联-->
                <input type="radio" name="sex" value="female" checked="">女
                <input type="radio" name="sex" value="male">男
                <input type="radio" name="sex" value="other">其他
        </p>
        <p>
                <label for="class">请选择课程</label>
                <select name="class">
                        <option value="1">Scratch</option>
                        <option value="2">Python</option>
                        <option value="3">HTML5</option>
                        <option value="4">C++</option>
                        <option value="5">Qt</option>
                </select>
        </p>
        <p>
                <label><input type="checkbox" name="rule" required="required">遵守相关规定</label>
        </p>
        <p><button>提交</button></p>
        <style>
                button{
                        width: 250px;
                        height: 33px;
                        border-radius: 10px;
                        color: #FFF;
                        background: #2385FE;
                        border-color: #2385FE;
                }
        </style>
        </form>
        </div>
</body>

fangfangfengfei · 发表于 2019-6-14 08:35:07

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="fishc_server.php" method="POST" style="text-align: center"autocomplete="off">
        <p><label for="">姓名：<input type="text" name="username" placeholder="贵姓"  autofocus></label></p>
        <p><label for="">电话：<input type="text" name="tel" placeholder="188" required></label></p>
        <p><label for="">邮箱：<input type="text" name="email" placeholder="邮箱" ></label></p>
        <p><label for="">生日：<input type="text" name="birth" placeholder="生日" ></label></p>
        <p>
            <label for="sex">性别：</label>
            <input type="radio" name="sex" value="female" checked>女
            <input type="radio" name="sex" value="male">男
            <input type="radio" name="sex" value="other">其他
        </p>
        <p>
            <label><input type="checkbox" name="rule" required="required">遵守鱼C相关规定</label>
        </p>
        <p>
            <label for="sel">请选择课程</label>
            <select name="sel">
                    <option value="1">Scratch</option>
                    <option value="2">Python</option>
                    <option value="3">C++</option>
                    <option value="4">HTML5</option>
                    <option value="5">Qt</option>
            </select>
    </p>
    <p><button>劳资要交表啦</button></p>
    </form>
</body>
</html>

克里斯保罗 · 发表于 2019-8-14 13:48:23

交作业！

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>sex</title>
</head>
<body>
        <p align="center">
        <label for="sex">性别：</label>
        <input type="radio" name="sex" value="famale" checked="checked">女
        <input type="radio" name="sex" value="man" >男
        <input type="radio" name="sex" value="other">其他
        </p>
        <p align="center">
                <label>
                        <input type="checkbox" name="rule" required="required">遵守规定
                </label>
        </p>
        <p align="center">
                <label>请选择课程</label>
                        <select name="class">
                                <option value="1">Python</option>
                                <option value="2">C++</option>
                                <option value="3">Linux</option>
                                <option value="4">C</option>
                        </select>
        </p>
        <p align="center"><button>
                老子要交表啦
        </button></p>
        <style type="text/css">
                button{
                        width: 500px;
                        height: 66px;
                }
        </style>
</body>
</html>

ltt1986 · 发表于 2019-8-19 20:40:04

<form method="post" action="fishc_server.php" align="center">

我看好几个是这样写的,在form标签的属性里找来找去没找到align这个项,居然也成功运行?

你在意在便在 · 发表于 2019-10-26 16:18:24

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>让编程改变世界</title>
<style>
button{
      width:500px;
      height:66px;
}
#box {
width: 600px;
height: 400px;
margin: 100px auto;
text-align: center;
}
</style>
</head>
<body>
<div id="box">
<form method="post" action="fishc_server.php">
      <p><label>姓名：<input type="text" name="username" placeholder="这位鱼油大帝，您贵姓？" autofocus="autofocus"></label></p>
      <p>
         <label for="sex">性别:</label>
         <input type="radio" name="sex" value="female" checked>女
         <input type="radio" name="sex" value="male">男
         <input type="radio" name="sex" value="other">其他
      </p>
      <p><label>电话：<input type="text" name="tel" placeholder="输入您的电话，我们的MM不会骚扰你" required="required"></label></p>
      <p><label>邮箱：<input type="text" name="email" placeholder="输入，有福利～"></label></p>
      <p><label>时间：<input type="text" name="date" placeholder="你想何时上课？"></label></p>
</form>
<p>
      <label for="class">请选择课程</label>
      <select name="class">
            <option value="1">Scratch</option>
            <option value="2">Python</option>
            <option value="3">C++</option>
            <option value="4">HTML5</option>
            <option value="5">Qt</option>
      </select>
      </p>
<p>
      <label><input type="checkbox" name="rule" required="required">遵守鱼C相关规定</label>
</p>

</form>
<p align="center"><button>劳资要交表啦</button></p>
</div>
</body>
</html>
交作业交作业~

ricia · 发表于 2020-2-21 20:16:08

huanghuiyv · 发表于 2020-8-17 09:39:38

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>提交表单</title>
    </head>

    <body>
        <form action="fishc_server.php" method="post">
            <label>姓名：<input type="text" placeholder="贵姓？"name="name" autofocus required></label><br>
            <label>性别：
            <input type="radio" name="sex" value="female">女
            <input type="radio" name="sex" value="male">男
            <input type="radio" name="sex" value="other">其他
            </label><br>
            <label>联系电话：<input type="tel" placeholder="联系方式" name="tel" required></label><br>
            <label>联系邮箱：<input type="email" placeholder="邮箱" name="email"></label><br>
            <label>预约时间：<input type="date" name="date"></label><br>
            <label>预约课程：
                <select name="class">
                    <option value="1">Scratch</option>
                    <option value="2">Python</option>
                    <option value="3">C++</option>
                    <option value="4">HTML5</option>
                    <option value="5">Qt</option>
                </select>
            </label><br>
            <label><input type="button" name="submit" value="交卷！"></label>
        </form>
    </body>
</html>

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 1 8 - 表单 - 设计你的鱼C选课单

点评

评分

点评

评分

点评

评分

点评

评分