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

不二如是

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

这一帖，学习表单。

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

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

先列个单子包含项：

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

创建表单


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

创建，form元素

<form></form>


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

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

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

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

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

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

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

但是，post不会

所以我们选用post

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

<form method="post" action="fishc_server.php"></form>


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

action="server.html"


get方式：



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方式：



file:///Users/Blad3/Desktop/HTML5%20/0018/server.html



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


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

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

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

<meta charset="utf-8">
<form method="post" action="fishc_server.php">
        <p>姓名：<input type="text" name="username"></p>
</form>

效果图：




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

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

<meta charset="utf-8">
<form method="post" action="fishc_server.php">
        <p><label>姓名：<input type="text" name="username"></label></p>
</form>

效果图：




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

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

效果图：




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

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

效果图：




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

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

<meta charset="utf-8">
<form method="post" action="fishc_server.php">
        <p><label>姓名：<input type="text" name="username" placeholder="这位鱼油大帝，您贵姓？" autofocus="autofocus"></label></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>

效果图：




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

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

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


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

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



性别


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

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

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

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

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

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

看代码：

<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>

效果图：




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

<p>
                <label><input type="checkbox" name="rule" required="required">遵守鱼C相关规定</label>
        </p>

效果图：





课程下拉菜单


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

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

Scratch、Python、HTML5、C++、Qt

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

代码：

        <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>

效果图：

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

        <p align="center"><button>劳资要交表啦</button></p>
        <style>
                button{
                           width:500px;
                        height:66px;
                          }
        </style>

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

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

官方 Web 课程：

joker11111

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



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

shishunfu

交作业

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>form表单</title>
        <link rel="stylesheet" type="text/css" href="0014CSS.css">
</head>
<body>
        <!--<form> 标签用于为用户输入创建 HTML 表单。
        表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
        表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
        表单用于向服务器传输数据。-->
        <div id="container">
        <form method="post" action="">
                <p><label>用户名：<input type="text" id="userName" placeholder="请输入昵称" required="required" autofocus="autofocus"></label></p><!--placeholder：规定帮助用户填写输入字段的提示。-->
                <p><label>密码：<input type="password" id="password" placeholder="请输入密码" required="required" autofocus="autofocus"></label></p>
                <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 属性的值。-->
                <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="datetime" name="date" placeholder="预约上课时间"></label></p>
                <p>
                        <label for="class">请选择课程</label>
                        <select id="class" name="class">
                                <option value="1">Java</option>
                                <option value="2">Python</option>
                                <option value="3">C</option>
                                <option value="4">HTML5</option>
                                <option value="5">goLang</option>
                        </select>
                </p>
                <p><label><input type="checkbox" name="rule" required="required">遵守鱼C相关规定</label></p>
                <button id="button">提交表单</button>
        </form>
        </div>
</body>
</html>

@charset "UTF-8";
html,body{
    height: 100%;
    color: #000000;
    font-family: sans-serif, serif,cursive,fantasy,monospace;
}
body{
    background-color: beige;
    margin: 0;
    padding: 0;
    position: relative;
}
#container{
    width: 100%;
    text-align: center;
}
#button{
    font-size: 33px;
    font-family: sans-serif, serif, cursive, fantasy, monospace;
    color: #FFFFFF;
    background-color: aqua;
    width:300px;
    height:66px;
    border:1px solid aqua;
    border-radius: 5px;
}

时光不老

学习了输入框的各种类型，真的好智能，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大洋表忠心

谢谢支持，比起讲段子

更喜欢写段子

未来肌肉男

交作业啦!!!!!!

星空·无限

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div style="background:#ffff00">
        <form action="" align="center">
            <p><label>姓名: <input type="text" name="userName" placeholder="你妈贵姓啊!" autofocus="autofocus"></label></p>
            <p><label>电话: <input type="tel" name="tel" placeholder="卖身联系电话"></label></p>
            <p><label>邮箱: <input type="email" name="email"></label></p>
            <p><label>时间: <input type="date" name="date" ></label></p>
            <p>
                <label for="sex">性别:</label>
                <input type="radio" name="sex" value="a">女
                <input type="radio" name="sex" value="b" checked>男
                <input type="radio" name="sex" value="c">其他
            </p>
            <p>
                <label for="class">独卖小件</label>
                <select name="class" id="">
                    <option value="1">javascript</option>
                    <option value="2">python</option>
                    <option value="3">java</option>
                </select>
            </p>
            <p><label><input type="checkbox" name="d" >同意卖身协议</label></p>
            <p align="center" style="background: aqua"><button>劳资要卖身让开</button></p>
            
        </form>
    </div>
</body>
</html>

likesunshine

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