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

不二如是

17中我们了解了文本 & 超链接。

这一帖，学习表单。

在H5中，表单类元素有着非常大的改变，功能越来越人性化，就是牛X的意思哈～

简单制作一个鱼C课程预约单，感受下～

先列个单子包含项：

• 姓名：字符串
  
• 性别： 单选框 男 Or 女 Or 其他
  
• 电话：数字
  
• 邮箱：数字+字符串
  
• 预约时间：数字 +字符串
  
• 预约课程：下拉框，字符串
  

创建表单


表单form的作用，就是将数据提交到某个页面，方便进一步数据处理。

创建，form元素

1. <form></form>
复制代码


创建完，需要添加表单设置method、action属性。

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

action，用来指定表单提交的目的页面。

method属性，中用两种提交方式：post & get

post，把数据放在数据体内然后再发给后台，数据不能直接被看到，但是传输数据量大

get，把数据放在URL中，以明文（可看）的方式发送给后台，传输数据量小，不能传输文件类数据。

说白了，就是get传输数据，会在目标页面显示用户数据很不安全！

但是，post不会

所以我们选用post

然后将数据，提交到fishc_server.php页面，请默认这个页面存在哈，代码如下：

1. <form method="post" action="fishc_server.php"></form>
复制代码


举个例子，假设我们的服务器地址，server.html，注意观察地址栏！

1. action="server.html"
复制代码


get方式：




1. file:///Users/Blad3/Desktop/HTML5%20/0018/server.html?username=sadasd&sex=female%0D%0A%09%09&tel=123&email=123&date=21313&class=4&rule=on
复制代码


看到了吗，你的数据轻易就泄露了！

post方式：




1. file:///Users/Blad3/Desktop/HTML5%20/0018/server.html
复制代码



创建姓名、邮箱、电话、时间


先创建姓名输入框，没错就是用老朋友<p>

使用<input>的type属性，设定文本输入框。

顺便添加name属性，方便后台调用数据。

1. <meta charset="utf-8">
   
2. <form method="post" action="fishc_server.php">
   
3.         <p>姓名：<input type="text" name="username"></p>
   
4. </form>
复制代码

效果图：




日常开发中，还有个小技巧。

就是用<label>标签，捆绑姓名和输入框，起到说明还能扩大表单选取范围：

1. <meta charset="utf-8">
   
2. <form method="post" action="fishc_server.php">
   
3.         <p><label>姓名：<input type="text" name="username"></label></p>
   
4. </form>
复制代码

效果图：




还是有点细节可以优化，input属性还可以加入placeholder占位符，起到提示作用

1. <meta charset="utf-8">
   
2. <form method="post" action="fishc_server.php">
   
3.         <p><label>姓名：<input type="text" name="username" placeholder="这位鱼油大帝，您贵姓？"></label></p>
   
4. </form>
复制代码

效果图：




因为，表单姓名往往是第一项，从用户体验角度讲直接把光标放在这里，效果会更好，用autofocus属性。

1. <meta charset="utf-8">
   
2. <form method="post" action="fishc_server.php">
   
3.         <p><label>姓名：<input type="text" name="username" placeholder="这位鱼油大帝，您贵姓？" autofocus="autofocus"></label></p>
   
4. </form>
复制代码

效果图：




这样是不是一下就很砖业 了

电话、邮箱、时间同理设置，至于优化，必填项，required属性也是不错，自己DIY吧

1. <meta charset="utf-8">
   
2. <form method="post" action="fishc_server.php">
   
3.         <p><label>姓名：<input type="text" name="username" placeholder="这位鱼油大帝，您贵姓？" autofocus="autofocus"></label></p>
   
4.         <p><label>电话：<input type="text" name="tel" placeholder="输入您的电话，我们的MM不会骚扰你" required="required"></label></p>
   
5.         <p><label>邮箱：<input type="text" name="email" placeholder="输入，有福利～"></label></p>
   
6.         <p><label>时间：<input type="text" name="date" placeholder="你想何时上课？"></label></p>
   
7. </form>
复制代码

效果图：




在H5中，input元素的type属性，还有很多新的类型：tel、email、date

这些属性，都会优化移动端的体验，对应把text换成相应的属性

1. <meta charset="utf-8">
   
2. <form method="post" action="fishc_server.php">
   
3.         <p><label>姓名：<input type="text" name="username" placeholder="这位鱼油大帝，您贵姓？" autofocus="autofocus"></label></p>
   
4.         <p><label>电话：<input type="tel" name="tel" placeholder="输入您的电话，我们的MM不会骚扰你" required="required"></label></p>
   
5.         <p><label>邮箱：<input type="email" name="email" placeholder="输入，有福利～"></label></p>
   
6.         <p><label>时间：<input type="date" name="date" placeholder="你想何时上课？"></label></p>
   
7. </form>
复制代码


因为暂时没有传到服务器，所以看不到效果。

在移动端，打开网页，会根据手机浏览器有相应的变化。



性别


型别因为有三个单选线，用三个radio即可。

同一组radio，具有相同的type、name。

radio有自己的value值：女、男、其他。

因此label标签独立于input元素外,但是为了表示二者关联，用for属性捆绑在一起。

不理解for也没关系，先知道怎么用，抓住主要矛盾。

为了，彰显女性地位，放在第一位，并设置checked属性，为默认属性

看代码：

1. <p>
   
2.                 <label for="sex">性别:</label>
   
3.                 <input type="radio" name="sex" value="female
   
4.                 " checked>女
   
5.                 <input type="radio" name="sex" value="male">男
   
6.                 <input type="radio" name="sex" value="other">其他
   
7.         </p>
复制代码

效果图：




我们顺便，加一个复选框，当作遵守鱼C规定的按钮：

1. <p>
   
2.                 <label><input type="checkbox" name="rule" required="required">遵守鱼C相关规定</label>
   
3.         </p>
复制代码

效果图：





课程下拉菜单


课程，下拉菜单，用select元素。

简单列举几个课程（没错，又有小天才养殖场 ）

Scratch、Python、HTML5、C++、Qt

然后用数字，1-5代表他们的值，也是for表示二者的联系。

代码：

1.         <p>
   
2.                 <label for="class">请选择课程</label>
   
3.                 <select name="class">
   
4.                         <option value="1">Scratch</option>
   
5.                         <option value="2">Python</option>
   
6.                         <option value="3">C++</option>
   
7.                         <option value="4">HTML5</option>
   
8.                         <option value="5">Qt</option>
   
9.                 </select>
   
10.         </p>
复制代码

效果图：

最后再加个button，提交表单，剧中center，顺便通过CSS放大：

1.         <p align="center"><button>劳资要交表啦</button></p>
   
2.         <style>
   
3.                 button{
   
4.                            width:500px;
   
5.                         height:66px;
   
6.                           }
   
7.         </style>

复制代码

最终代码，相信你没问题，给你个最终图：

这位鱼油，如果喜欢本帖子，请订阅 专辑-->（传送门）（不喜欢更要订阅 ）

官方 Web 课程：

joker11111

为毛我看完想到的是MFC的界面，拖个按钮，拖个静态文字，拖个下拉框
哈哈哈哈，乱入乱入，先占个坑，一会交作业



看到这儿的童鞋希望大家都动手做一做，你会发现，怎么把form区块的东西居中来着？ 怎么来着？ 哈哈哈哈哈哈哈哈，回去复习啊啊啊啊！！！

shishunfu

交作业

1. <!DOCTYPE html>
   
2. <html lang="en">
   
3. <head>
   
4.         <meta charset="UTF-8">
   
5.         <title>form表单</title>
   
6.         <link rel="stylesheet" type="text/css" href="0014CSS.css">
   
7. </head>
   
8. <body>
   
9.         <!--<form> 标签用于为用户输入创建 HTML 表单。
   
10.         表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
    
11.         表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
    
12.         表单用于向服务器传输数据。-->
    
13.         <div id="container">
    
14.         <form method="post" action="">
    
15.                 <p><label>用户名：<input type="text" id="userName" placeholder="请输入昵称" required="required" autofocus="autofocus"></label></p><!--placeholder：规定帮助用户填写输入字段的提示。-->
    
16.                 <p><label>密码：<input type="password" id="password" placeholder="请输入密码" required="required" autofocus="autofocus"></label></p>
    
17.                 <p><label for="sex">性别：<input type="radio" id="sex" name="sex" value="woman" checked="checked">woman<input type="radio" name="sex" value="man">man</label></p><!--<label> 标签的 for 属性应当与相关元素的 id 属性相同。注释："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。-->
    
18.                 <p><label>电话：<input type="tel" name="tel" placeholder="输入您的电话" required="required"></label></p>
    
19.                 <p><label>邮箱：<input type="email" name="email" placeholder="输入邮箱，有福利～"></label></p>
    
20.                 <p><label>时间：<input type="datetime" name="date" placeholder="预约上课时间"></label></p>
    
21.                 <p>
    
22.                         <label for="class">请选择课程</label>
    
23.                         <select id="class" name="class">
    
24.                                 <option value="1">Java</option>
    
25.                                 <option value="2">Python</option>
    
26.                                 <option value="3">C</option>
    
27.                                 <option value="4">HTML5</option>
    
28.                                 <option value="5">goLang</option>
    
29.                         </select>
    
30.                 </p>
    
31.                 <p><label><input type="checkbox" name="rule" required="required">遵守鱼C相关规定</label></p>
    
32.                 <button id="button">提交表单</button>
    
33.         </form>
    
34.         </div>
    
35. </body>
    
36. </html>

复制代码

1. @charset "UTF-8";
   
2. html,body{
   
3.     height: 100%;
   
4.     color: #000000;
   
5.     font-family: sans-serif, serif,cursive,fantasy,monospace;
   
6. }
   
7. body{
   
8.     background-color: beige;
   
9.     margin: 0;
   
10.     padding: 0;
    
11.     position: relative;
    
12. }
    
13. #container{
    
14.     width: 100%;
    
15.     text-align: center;
    
16. }
    
17. #button{
    
18.     font-size: 33px;
    
19.     font-family: sans-serif, serif, cursive, fantasy, monospace;
    
20.     color: #FFFFFF;
    
21.     background-color: aqua;
    
22.     width:300px;
    
23.     height:66px;
    
24.     border:1px solid aqua;
    
25.     border-radius: 5px;
    
26. }

复制代码

时光不老

学习了输入框的各种类型，真的好智能，date那个直接出日历

MSK

交！作！业！

aswyamato1989

交作业！

alltolove

信息量真大

不二如是

alltolove 发表于 2017-1-14 11:33
信息量真大

都很简单哈～

不二如是

joker11111 发表于 2017-2-20 23:13
为毛我看完想到的是MFC的界面，拖个按钮，拖个静态文字，拖个下拉框
哈哈哈哈，乱入 ...

只要套路深，铁杵磨成针

joker11111

不二如是 发表于 2017-2-21 06:58
只要套路深，铁杵磨成针

这套路刚刚滴

不二如是

joker11111 发表于 2017-2-21 07:45
这套路刚刚滴

mumudontcry

提交到php

不二如是

mumudontcry 发表于 2017-2-21 09:05
提交到php

交给你了～
【包教不包会】

mumudontcry

不二如是 发表于 2017-2-21 09:15
交给你了～
【包教不包会】

=、=讲道理，，，，你这些教程有点简单，不过可能和我初衷差不多吧

不二如是

mumudontcry 发表于 2017-2-21 11:36
=、=讲道理，，，，你这些教程有点简单，不过可能和我初衷差不多吧

由易到难，由难到易

aluominhai

不二，做个视频吧。学生狗愿出50大洋表忠心

不二如是

aluominhai 发表于 2017-3-8 20:38
不二，做个视频吧。学生狗愿出50大洋表忠心

谢谢支持，比起讲段子

更喜欢写段子

未来肌肉男

交作业啦!!!!!!

星空·无限

1. <!doctype html>
   
2. <html lang="en">
   
3. <head>
   
4.     <meta charset="UTF-8">
   
5.     <meta name="viewport"
   
6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   
7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
   
8.     <title>Document</title>
   
9. </head>
   
10. <body>
    
11.     <div style="background:#ffff00">
    
12.         <form action="" align="center">
    
13.             <p><label>姓名: <input type="text" name="userName" placeholder="你妈贵姓啊!" autofocus="autofocus"></label></p>
    
14.             <p><label>电话: <input type="tel" name="tel" placeholder="卖身联系电话"></label></p>
    
15.             <p><label>邮箱: <input type="email" name="email"></label></p>
    
16.             <p><label>时间: <input type="date" name="date" ></label></p>
    
17.             <p>
    
18.                 <label for="sex">性别:</label>
    
19.                 <input type="radio" name="sex" value="a">女
    
20.                 <input type="radio" name="sex" value="b" checked>男
    
21.                 <input type="radio" name="sex" value="c">其他
    
22.             </p>
    
23.             <p>
    
24.                 <label for="class">独卖小件</label>
    
25.                 <select name="class" id="">
    
26.                     <option value="1">javascript</option>
    
27.                     <option value="2">python</option>
    
28.                     <option value="3">java</option>
    
29.                 </select>
    
30.             </p>
    
31.             <p><label><input type="checkbox" name="d" >同意卖身协议</label></p>
    
32.             <p align="center" style="background: aqua"><button>劳资要卖身让开</button></p>
    
33.             
    
34.         </form>
    
35.     </div>
    
36. </body>
    
37. </html>

复制代码

likesunshine

刚开始学，自己还是写不出来啊，只能根据楼上照猫画虎来一个