设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › Web密训营 › 0 0 1 8 - 表单 - 设计你的鱼C选课单
12
返回列表 发新帖
楼主: 不二如是

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

[复制链接]
像番茄加两个蛋
发表于 2018-4-14 20:08:07 | 显示全部楼层
1.gif
有一个关于label标签问题请求不二老师@不二如是
label标签中的for属性里的值，是对应标签中的name还是id呢？我试了好像只能是id，name好像不行。
代码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>表单</title>
  6.     <style>
  7.         form {
  8.             text-align: center;
  9.         }
  10.         button {
  11.             outline: none;
  12.             background: none;
  13.             width: 300px;
  14.             height: 100px;
  15.             border-radius: 10px;
  16.             border: 2px solid cornflowerblue;
  17.             font-size: 48px;
  18.             cursor: pointer;
  19.             transition: all 0.4s;
  20.             color: cornflowerblue;
  21.         }
  22.         button:hover {
  23.             background: cornflowerblue;
  24.             color: white;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29. <form action="server.php" method="post">
  30.     <p>
  31.         <label>
  32.              姓名：
  33.             <input type="text" name="username" placeholder="请输入您的姓名" autofocus="autofocus" required="required">
  34.         </label>
  35.     </p>
  36.     <p>
  37.         <label>
  38.             电话：
  39.             <input type="tel" name="tel" placeholder="请您输入电话" required="required">
  40.         </label>
  41.     </p>
  42.     <p>
  43.         <label>
  44.             邮箱：
  45.             <input type="email" name="email" placeholder="请您输入邮箱" required="required">
  46.         </label>
  47.     </p>
  48.     <p>
  49.         <label>
  50.             时间：
  51.             <input type="date" name="date" placeholder="请您输入上课时间" required="required">
  52.         </label>
  53.     </p>
  54.     <p>
  55.             性别：
  56.         <input type="radio" name="sex" required="required" value="woman" checked="checked">女
  57.         <input type="radio" name="sex" required="required" value="man">男
  58.     </p>
  59.     <p>
  60.         <label for="class">
  61.             课程：
  62.             <select name="class" id="class">
  63.                 <option value="1">C#</option>
  64.                 <option value="2">Python</option>
  65.                 <option value="3">C++</option>
  66.                 <option value="4">HTML5</option>
  67.             </select>
  68.         </label>
  69.     </p>
  70.     <p>
  71.         <label>
  72.             <input type="checkbox" name="rule" required="required">
  73.             遵守相关规定
  74.         </label>
  75.     </p>
  76.     <p>
  77.         <button>提 交</button>
  78.     </p>
  79. </form>
  80. </body>
  81. </html>
复制代码


点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
id  发表于 2018-4-15 15:39

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 热爱鱼C^_^

查看全部评分

小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

华丽转身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>
****************************************************************
QQ截图20180430140355.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

隨鈊乄鎍慾
发表于 2018-5-25 11:35:58 | 显示全部楼层
本帖最后由 隨鈊乄鎍慾 于 2018-5-25 11:45 编辑

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

  18.                                         <label for="sex" > 性别：</label>
  19.                                         <input type="radio" name="sex" value="female" checked>女
  20.                                         <input type="radio" name="sex" value="male" >男
  21.                                 </p>
  22.                                
  23.                                 <p>
  24.                                         <label for="class" >请选择服务项目</label>
  25.                                         <select name="class">
  26.                                                 <option value="1">美甲</option>
  27.                                                 <option value="1">纹绣</option>
  28.                                                 <option value="1">美体</option>
  29.                                                 <option value="1">丰胸</option>
  30.                                                 <option value="1">祛逗</option>
  31.                                         </select>
  32.                                 </p>
  33.                                
  34.                                 <p>
  35.                                         <label><input type="checkbox" name="rule" required="required" checked>遵守鱼C相关规定</label>
  36.                                 </p>
  37.                                
  38.                                 <p align="center">  <button>劳资要交表啦</button> </p>
  39.                                 <style>
  40.                                         button{
  41.                                                 width:230px;
  42.                                                 height:33px;
  43.                                                 transform:translateX(6%);
  44.                                         }
  45.                                        
  46.                                 </style>
  47.                         </form>
  48.                 </div>
  49.                 <style>
  50.                         body{
  51.                                 background: url(background.jpg) center center;
  52.                                 <!--"background-size: cover;"-->
  53.                                 margin:0;/*初始化内外边距*/
  54.                                 padding:0;
  55.                                 position:relative; /*相对定位*/
  56.                                
  57.                         }
  58.                         #sheet{
  59.                                 position:absolute;/*绝对定位*/
  60.                                 top:50%;
  61.                                 width:100%;
  62.                                 text-align:center;/*设置文字水平居中*/
  63.                                 transform:translateY(-50%);
  64.                         }
  65.                 </style>
  66.         </body>
  67. </html>
复制代码

20180525114035216 - 副本.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

rock5442107
发表于 2018-5-29 01:21:20 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meata charset="UTF-8">
  5.         <title>歡迎來到HTML世界</title>
  6.         <style>
  7.                 body{
  8.                         background:url(KED08.jpg);
  9.                         background-size: cover;
  10.                         margin: 0;
  11.                         padding: 0;
  12.                         position: relative;
  13.                 }
  14.                 p{
  15.                         text-align:center;
  16.                 }
  17.                 button{
  18.                         width:500px;
  19.                         height:66px;
  20.                 }
  21.         </style>
  22. </head>
  23. <body>
  24.         <form method="post" action="fishc_server.php">
  25.                 <p><label>姓名：<input type="text" name="username" placeholder="這位大大，您貴姓？" autofocus="autofocus"></label></p>
  26.                 <p>
  27.                         <label for="sex">性別：</label>
  28.                         <input type="radio" name="sex" value="female" checked>女
  29.                         <input type="radio" name="sex" value="man">男
  30.                         <input type="radio" name="sex" value="other">其他
  31.                 </p>
  32.                 <p><label>電話：<input type="text" name="tel" placeholder="輸入您的電話。" required="required"></label></p>
  33.                 <p><label>郵箱：<input type="text" name="mail" placeholder="輸入，有福利～"></label></p>
  34.                 <p><label>時間：<input type="text" name="date" placeholder="妳何時有空？"></label></p>
  35.                 <p>
  36.                         <label for="class">請選擇課程</label>
  37.                         <select name="class">
  38.                         <option value="1">Scratch</option>
  39.                         <option value="2">Python</option>
  40.                         <option value="3">C++</option>
  41.                         <option value="4">HTML5</option>
  42.                         <option value="5">Qt</option>
  43.                         </select>
  44.                 </p>
  45.                 <p>
  46.                         <label><input type="checkbox" name="rule" required="required">遵守相關規定</label>
  47.                 </p>
  48.                 <p><button>填完就可以起飛了哦～</button>
  49.         </form>
  50. </body>
  51. </html>
复制代码


018.jpg

交作业了哦
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

STmove
发表于 2018-7-14 23:58:56 | 显示全部楼层
交作业啦！
  1. <!doctype html>
  2. <html>
  3. <meta charset="uft-8">
  4. <head>
  5. <title>lesson 0018</title>
  6. </head>

  8. <body>
  9.     <!--这里不是很懂，留存先， 所以我们选用post然后将数据，提交到fishc_server.php页面，请默认这个页面存在哈，代码如下： -->
  10.         <form align="center" method="post" action="fishc_server.php">
  11.                 <p><label>姓名：<input type="text" name="username" placeholder="输姓名！" autofocus="autofocus"></label></p >
  12.         <!-- required:'必须的' -->
  13.         <p><label>电话：<input type="tel" name="tel" placeholder="请输入电话号码" required="required"></label></p>
  14.         <p><label>邮箱：<input type="email" name="email" placeholder="输入email有福利"></label></p>
  15.         <p><label>时间：<input type="date" name="date" placeholder="你想何时上课？"></label></p>
  16.         
  17.         <p>
  18.             <label for="sex">性别:</label>
  19.             <input type="radio" name="sex" value="female" checked>女
  20.             <input type="radio" name="sex" value="male">男
  21.             <input type="radio" name="sex" value="other">其他
  22.         </p>
  23.         <p>
  24.             <label for="classes">请选择课程:</label>
  25.             <select name="classes">
  26.                 <option value="1">Scratch</option>
  27.                 <option value="2">Python</option>
  28.                 <option value="3">C++</option>
  29.                 <option value="4">HTMLS</option>
  30.                 <option value="5">Qt</option>
  31.                
  32.             </select>
  33.         </p>
  34.         <p>
  35.             <label><input type="checkbox" name="rules" required="required" checked>表示愿意遵守鱼C相关规定</label>
  36.         </p>
  37.     </form>
  38.     <p align="center"><button id="confirm">劳资要<big>交表啦</big></button></p>
  39.     <style>
  40.         button
  41.         {
  42.             width:300px;
  43.             height:66px;
  44.         }
  45.     </style>
  46. </body>
  47. </html>
复制代码

0018.JPG

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2018-8-21 10:56

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 鱼C有你更精彩^_^

查看全部评分

小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

上帝也幽默
发表于 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>

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2018-8-21 10:56

评分

参与人数 1鱼币 +3 收起 理由
不二如是 + 3 鱼C有你更精彩^_^

查看全部评分

小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

船到桥头自然沉
发表于 2018-9-5 12:35:46 | 显示全部楼层
填空题.png

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2019-6-14 09:15

评分

参与人数 1鱼币 +5 收起 理由
不二如是 + 5 鱼C有你更精彩^_^

查看全部评分

小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

soulwyb
发表于 2018-10-14 23:50:55 | 显示全部楼层
  1. <!doctype>
  2. <html>

  4. <head></head>

  6. <body>
  7.     <form action="fishc_server.php" method="post">
  8.         <p align="center"><label>姓名：<input type="text" name="username" placeholder="大佬请输入姓名" autofocus="autofocus"></label></p>
  9.         <p align="center"><label>电话：<input type="tel" name="tel" placeholder="输入您的电话，我们的MM不会骚扰你" required="required"></label></p>
  10.         <p align="center"><label>邮箱：<input type="email" name="email" placeholder="输入，有福利"></label></p>
  11.         <p align="center"><label>时间：<input type="date" name="time" placeholder="你想何时上课"></label></p>
  12.         <p align="center">
  13.             <label for="sex">性别：</label>
  14.             <input type="radio" name="sex" value="female" checked>女
  15.             <input type="radio" name="sex" value="male">男
  16.             <input type="radio" name="sex" value="other">其他
  17.         </p>
  18.         <p align="center">
  19.             <label><input type="checkbox" name="rule" required="required">准守鱼C规定</label></p>
  20.         </p>
  21.         <p align="center">
  22.             <label for="class">小天才养殖场</label>
  23.             <select name="class">
  24.                 <option value="1">Scratch</option>
  25.                 <option value="2">Python</option>
  26.                 <option value="3">HTML</option>
  27.                 <option value="4">C++</option>
  28.                 <option value"5">Qt</option>
  29.             </select>
  30.         </p>
  31.         <p align="center"><button>劳资要交表啦</button></p>
  32.         <style>
  33.             button {
  34.                 width: 500px;
  35.                 height: 66px;
  36.             }
  37.         </style>


  40.     </form>
  41. </body>

  43. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

QiaoaiMen
发表于 2018-11-14 19:34:08 | 显示全部楼层
继续交作业
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>018练习</title>
  6.         <style type="text/css">
  7.                 html,body{
  8.                         height: 100%;
  9.                         font-family: sans-serif;
  10.                 }
  11.                 #xinxi{
  12.                         width: 100%;
  13.                         text-align: center;
  14.                         position: absolute;
  15.                         top: 50%;
  16.                         transform: translateY(-50%)
  17.                 }
  18.                 body{
  19.                         margin: 0;
  20.                         padding: 0;
  21.                         position: relative;
  22.                 }
  23.                 button{
  24.                                         width: 500px;
  25.                                         height: 66px;
  26.                                         font-size: 44px;
  27.                                 }
  28.         </style>
  29. </head>
  30. <body>
  31.         <div id="xinxi">
  32.                 <form method="post" action="fishc.php">
  33.                         <p><label>姓名：<input type="text" name="username" placeholder="请输入您的姓名" autofocus="autofocus" required="required"></label></p>
  34.                         <p>
  35.                                 <label for="sex">性别：</label>
  36.                                 <input type="radio" name="sex" value="female" checked>女
  37.                                 <input type="radio" name="sex" value="male">男
  38.                                 <input type="radio" name="sex" value="others">其他
  39.                         </p>
  40.                         <p><label>电话：<input type="tel" name="tel" placeholder="请输入11位手机号" required="required"></label></p>
  41.                         <p><label>邮箱：<input type="email" name="email" placeholder="请输入常用邮箱"></label></p>
  42.                         <p><label>日期：<input type="datetime" name="date" placeholder="请输入你期望的上课日期"></label></p>
  43.                         <p>
  44.                                 <label for="class">请选择课程</label>
  45.                                 <select name="class">
  46.                                         <option value="1">Scratch</option>
  47.                                         <option value="1">Python</option>
  48.                                         <option value="1">C++</option>
  49.                                         <option value="1">HTML5</option>
  50.                                         <option value="1">Qt</option>
  51.                                 </select>
  52.                         </p>
  53.                         <p>
  54.                                 <label><input type="checkbox" name="rule" required="required">遵守注册守则</label>
  55.                         </p>
  56.                         <p align="center"><button>注 册</button></p>
  57.                 </form>
  58.         </div>
  59. </body>
  60. </html>
复制代码

小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

星海雪的钟爱
发表于 2019-2-21 17:45:56 | 显示全部楼层
交作业：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>表单</title>
  8.     <style>
  9.         html{
  10.             margin: 0;
  11.             padding: 0;
  12.             width: 100%;
  13.         }
  14.         body{
  15.            background: url(../../images/bg.jpg) center center;
  16.         }
  17.         form{
  18.             
  19.             width: 100%;
  20.             position: absolute;
  21.             text-align: center;
  22.             top: 50%;
  23.             transform: translateY(-50%);
  24.             background-color: rgba(30, 11, 55, .2)
  25.             

  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.     <form action="">
  32.        <p>
  33.             <label for="username">姓名：
  34.                  <input type="text" name="username" id="user" placeholder="请输入姓名" autofocus='autofocus'>   
  35.             </label>   
  36.        </p>

  38.         <p>
  39.             <label for="sex">性别：</label>
  40.             <input type="radio" name="sex" value="male"><span>男</span>
  41.             <input type="radio" name="sex" value="female" checked='checked'><span>女</span>
  42.         
  43.         </p>
  44.       
  45.         <p><label for="email">邮箱：<input type="email" name="email" required='required'></label></p>
  46.         <p><label for="phone">手机：<input type="tel" name="phone" required='required'></label></p>
  47.         <p><label for="email">时间：<input type="datetime-local" name="time" required='required'></label></p>
  48.         <p>
  49.             <label>请选择课程：
  50.                 <select name="course" id="course">
  51.                     <option value="python">Pyhon</option>
  52.                     <option value="java">Java</option>
  53.                     <option value="js">Javascript</option>

  55.                 </select>
  56.             </label>

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

  61.         <p>
  62.             <input type="submit" value="提交">
  63.             <input type="reset" value="取消">
  64.         </p>
  65.       


  68.     </form>
  69. </body>
  70. </html>
复制代码
18.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

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

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

  15.         action，用来指定表单提交的目的页面。-->
  16.         <p><label>姓名：<input type="text" name="username" placeholder="请输入姓名" autofocus="autofocus"></label></p>
  17.         <!--placeholder占位符，起到提示作用-
  18.             autofocus默认自动获得焦点-->
  19.         <p><label>电话：<input type="tel" name="tel" placeholder="请输入电话号码" required="required"></label></p>
  20.         <!--表明用户必须输入一个值，否则无法通过输入验证,必填项-->
  21.         <p><label>邮箱：<input type="email" name="email" placeholder="输入，有福利～"></label></p>
  22.     <p><label>时间：<input type="date" name="date" placeholder="你想何时上课？"></label></p>
  23.         <p>
  24.                 <label for="sex">性别：</label>
  25.                 <!--因为label和input独立分开，用for进行关联-->
  26.                 <input type="radio" name="sex" value="female" checked="">女
  27.                 <input type="radio" name="sex" value="male">男
  28.                 <input type="radio" name="sex" value="other">其他
  29.         </p>
  30.         <p>
  31.                 <label for="class">请选择课程</label>
  32.                 <select name="class">
  33.                         <option value="1">Scratch</option>
  34.                         <option value="2">Python</option>
  35.                         <option value="3">HTML5</option>
  36.                         <option value="4">C++</option>
  37.                         <option value="5">Qt</option>
  38.                 </select>
  39.         </p>
  40.         <p>
  41.                 <label><input type="checkbox" name="rule" required="required">遵守相关规定</label>
  42.         </p>
  43.         <p><button>提交</button></p>
  44.         <style>
  45.                 button{
  46.                         width: 250px;
  47.                         height: 33px;
  48.                         border-radius: 10px;
  49.                         color: #FFF;
  50.                         background: #2385FE;
  51.                         border-color: #2385FE;
  52.                 }
  53.         </style>
  54.         </form>
  55.         </div>
  56. </body>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

fangfangfengfei
发表于 2019-6-14 08:35:07 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <form action="fishc_server.php" method="POST" style="text-align: center"autocomplete="off">
  11.         <p><label for="">姓名：<input type="text" name="username" placeholder="贵姓"  autofocus></label></p>
  12.         <p><label for="">电话：<input type="text" name="tel" placeholder="188" required></label></p>
  13.         <p><label for="">邮箱：<input type="text" name="email" placeholder="邮箱" ></label></p>
  14.         <p><label for="">生日：<input type="text" name="birth" placeholder="生日" ></label></p>
  15.         <p>
  16.             <label for="sex">性别：</label>
  17.             <input type="radio" name="sex" value="female" checked>女
  18.             <input type="radio" name="sex" value="male">男
  19.             <input type="radio" name="sex" value="other">其他
  20.         </p>
  21.         <p>
  22.             <label><input type="checkbox" name="rule" required="required">遵守鱼C相关规定</label>
  23.         </p>
  24.         <p>
  25.             <label for="sel">请选择课程</label>
  26.             <select name="sel">
  27.                     <option value="1">Scratch</option>
  28.                     <option value="2">Python</option>
  29.                     <option value="3">C++</option>
  30.                     <option value="4">HTML5</option>
  31.                     <option value="5">Qt</option>
  32.             </select>
  33.     </p>
  34.     <p><button>劳资要交表啦</button></p>
  35.     </form>
  36. </body>
  37. </html>
复制代码

小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

克里斯保罗
发表于 2019-8-14 13:48:23 | 显示全部楼层
交作业！
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>sex</title>
  6. </head>
  7. <body>
  8.         <p align="center">
  9.         <label for="sex">性别：</label>
  10.         <input type="radio" name="sex" value="famale" checked="checked">女
  11.         <input type="radio" name="sex" value="man" >男
  12.         <input type="radio" name="sex" value="other">其他
  13.         </p>
  14.         <p align="center">
  15.                 <label>
  16.                         <input type="checkbox" name="rule" required="required">遵守规定
  17.                 </label>
  18.         </p>
  19.         <p align="center">
  20.                 <label>请选择课程</label>
  21.                         <select name="class">
  22.                                 <option value="1">Python</option>
  23.                                 <option value="2">C++</option>
  24.                                 <option value="3">Linux</option>
  25.                                 <option value="4">C</option>
  26.                         </select>
  27.         </p>
  28.         <p align="center"><button>
  29.                 老子要交表啦
  30.         </button></p>
  31.         <style type="text/css">
  32.                 button{
  33.                         width: 500px;
  34.                         height: 66px;
  35.                 }
  36.         </style>
  37. </body>
  38. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

ltt1986
发表于 2019-8-19 20:40:04 | 显示全部楼层
  1. <form method="post" action="fishc_server.php" align="center">
复制代码

我看好几个是这样写的,在form标签的属性里找来找去没找到align这个项,居然也成功运行?
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

你在意在便在
发表于 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>
交作业交作业~
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

ricia
发表于 2020-2-21 20:16:08 | 显示全部楼层
QQ图片20200221201538.png
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

huanghuiyv
发表于 2020-8-17 09:39:38 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>提交表单</title>
  6.     </head>

  8.     <body>
  9.         <form action="fishc_server.php" method="post">
  10.             <label>姓名：<input type="text" placeholder="贵姓？"name="name" autofocus required></label><br>
  11.             <label>性别：
  12.             <input type="radio" name="sex" value="female">女
  13.             <input type="radio" name="sex" value="male">男
  14.             <input type="radio" name="sex" value="other">其他
  15.             </label><br>
  16.             <label>联系电话：<input type="tel" placeholder="联系方式" name="tel" required></label><br>
  17.             <label>联系邮箱：<input type="email" placeholder="邮箱" name="email"></label><br>
  18.             <label>预约时间：<input type="date" name="date"></label><br>
  19.             <label>预约课程：
  20.                 <select name="class">
  21.                     <option value="1">Scratch</option>
  22.                     <option value="2">Python</option>
  23.                     <option value="3">C++</option>
  24.                     <option value="4">HTML5</option>
  25.                     <option value="5">Qt</option>
  26.                 </select>
  27.             </label><br>
  28.             <label><input type="button" name="submit" value="交卷！"></label>
  29.         </form>
  30.     </body>
  31. </html>
复制代码
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

12
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-6-7 22:27

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表