论坛 › Web密训营 › 0 0 1 8 - 表单 - 设计你的鱼C选课单

不二如是 发表于 2017-1-13 11:44:45

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

本帖最后由 不二如是 于 2021-8-11 09:14 编辑

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>
效果图：


这样是不是一下就很砖业{:10_278:} 了

电话、邮箱、时间同理设置，至于优化，必填项，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元素。

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

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>

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


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

官方 Web 课程：

https://www.bilibili.com/video/BV1QW411N762

joker11111 发表于 2017-2-20 23:13:24

本帖最后由 joker11111 于 2017-2-21 00:18 编辑

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



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

shishunfu 发表于 2017-4-20 10:19:58

交作业<!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;
}

时光不老 发表于 2017-5-1 10:49:11

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

MSK 发表于 2017-7-9 16:05:41

交！作！业！{:9_237:}

aswyamato1989 发表于 2017-7-14 00:53:45

交作业！

alltolove 发表于 2017-1-14 11:33:50

信息量真大{:10_249:}

不二如是 发表于 2017-1-14 11:38:47

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


都很简单哈～

不二如是 发表于 2017-2-21 06:58:16

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


只要套路深，铁杵磨成针

joker11111 发表于 2017-2-21 07:45:57

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

这套路刚刚滴{:10_281:}

不二如是 发表于 2017-2-21 08:26:04

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

{:10_281:}{:10_288:}

mumudontcry 发表于 2017-2-21 09:05:40

提交到php

不二如是 发表于 2017-2-21 09:15:57

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

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

mumudontcry 发表于 2017-2-21 11:36:52

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

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

不二如是 发表于 2017-2-21 15:16:31

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


由易到难，由难到易

aluominhai 发表于 2017-3-8 20:38:06

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

不二如是 发表于 2017-3-8 23:02:13

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

谢谢支持，比起讲段子

更喜欢写段子{:10_254:}

未来肌肉男 发表于 2017-6-25 17:39:41

本帖最后由 未来肌肉男 于 2017-6-25 17:41 编辑


交作业啦!!!!!!

星空·无限 发表于 2018-1-10 17:19:43

本帖最后由 星空·无限 于 2018-1-10 17:22 编辑

<!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 发表于 2018-3-11 16:44:15

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

查看完整版本: 0 0 1 8 - 表单 - 设计你的鱼C选课单