鱼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^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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
想知道小甲鱼最近在做啥?请访问 -> 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>

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

20180525114035216 - 副本.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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

交作业了哦
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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>

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

0018.JPG

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2018-8-21 10:56

评分

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

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> 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有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-9-5 12:35:46 | 显示全部楼层
填空题.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2019-6-14 09:15

评分

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

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

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

  3. <head></head>

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


  36.     </form>
  37. </body>

  38. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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>
复制代码

想知道小甲鱼最近在做啥?请访问 -> 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.             

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

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

  52.                 </select>
  53.             </label>

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

  56.         <p>
  57.             <input type="submit" value="提交">
  58.             <input type="reset" value="取消">
  59.         </p>
  60.       


  61.     </form>
  62. </body>
  63. </html>
复制代码
18.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 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传输数据,会在目标页面显示用户数据很不安全!

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

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

使用道具 举报

发表于 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>
复制代码

想知道小甲鱼最近在做啥?请访问 -> 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>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

我看好几个是这样写的,在form标签的属性里找来找去没找到align这个项,居然也成功运行?
想知道小甲鱼最近在做啥?请访问 -> 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>
交作业交作业~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-2-21 20:16:08 | 显示全部楼层
QQ图片20200221201538.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

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

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-3-29 15:38

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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