H5表单学习

玉不琢，不成器。人不学，不知义

表单元素其实还是`HTML`中的一些标签，只不过这些标签比较特殊，在浏览器中所有的表单标签都有特殊的外观和默认的功能

表单格式

    <form>
        <div class="form-group">
            <label>账号:</label>
            <input type="text" value="test1">
        </div>
        <div class="form-group">
            <label>密码:</label>
            <input type="password" value="123456">
        </div>
        <div>
            <label>记住密码</label>
            <input type="checkbox">
        </div>
    </form>

单选框

            <input type="radio" name="xx" checked="checked">
            <label>男</label>
            <input type="radio" name="xx">
            <label>女</label>
            <input type="radio" name="xx">
            <label>保密</label>

1、默认情况下单选框不会互斥，即可以多选，想要互斥，那么必须给其添加一个name属性，值可以随便取，但是互斥的几个值必须一样。
2、想要单选框默认选中一个，那么可以给其添加一个checked属性，其值为checked，由于值和属性名一样，所以可以省略值，建议不省略

多选框

        <div>
            <label>爱好:</label>
            <input type="checkbox" checked="checked">
            <label>电玩</label>
            <input type="checkbox">
            <label>旅行</label>
            <input type="checkbox">
            <label>钓鱼</label>
        </div>

按钮

        <div>
            <input type="button" value="点击看看" onclick="alert('随便')">
            <input type="image" src="../static/img/1.jpg" onclick="alert('随便')">
            <!--//图片按钮-->
            <input type="reset" value="清空">
            <!--//重置按钮 默认为重置-->
            <input type="submit">
            <!--//提交按钮 默认值为提交-->
        </div>

其中value为按钮的文字 onclick为点击事件，reset和submit默认值为重置和提交，当然我们可以添加value为其修改值。
submit为提交按钮，是提交到远程服务器

1、在哪里指定服务器呢？答案是在form标签的action属性中来指定，如下

<form action="blogDetail.html">
</form>

这里我将其提交到我本地的blogDetail.html文件、

2、指定那些值来提交到服务器

        <div class="form-group">
            <label>账号:</label>
            <input type="text" value="test1" name="loginname">
        </div>
        <div class="form-group">
            <label>密码:</label>
            <input type="password" value="123456" name="password">
        </div>

在上面，给账号和密码分别指定了两个name属性，并赋值，这样在提交的时候，会将其值提交到服务器，看下面的提交地址
http://localhost:63342/beegoWebForBlog/views/blogDetail.html?loginname=test1&password=123456&xx=on
通过地址我们发现，参数和值分别跟在了地址后面，还有个xx=on，是因为我在单选框的时候也设置了个属性name

当然提交的数据为on这肯定是不行的，所以我们可以对选项卡进行如下的设置

    <p>
        <label>性别:</label>
        <input type="radio" name="sex" value="man">
        <label>男</label>
        <input type="radio" name="sex" value="woman">
        <label>女</label>
        <input type="radio" name="sex" value="secret" checked="checked">
        <label>保密</label>
    </p>
    <p>
        <label>爱好:</label>
        <input type="checkbox" name="aihao" value="fish" checked="checked">
        <label>钓鱼</label>
        <input type="checkbox" name="aihao" value="pashan">
        <label>爬山</label>
        <input type="checkbox" name="aihao" value="sport">
        <label>运动</label>
        <input type="checkbox" name="aihao" value="learn">
        <label>学习</label>
    </p>

就是添加一个value属性，这样就可以让我们明确的知道那个值

隐藏域

有时候我们需要提交一些隐藏的数据，但是又不想给用户展示，那么就有了下面这个方式

        <input type="hidden" name="hidden" value="yincangxinxi">

提交后看地址变成如下
http://localhost:63342/beegoWebForBlog/views/blogDetail.html?loginname=test1&password=123456&xx=on&hidden=yincangxinxi

Lable标签

当我们在登录页面的时候，如果点击前面的账号或者密码的时候，需要让后面的输入框进入选中状态的时候，我们可以将lable和input输入标签进行绑定，代码很简单，如下

        <div class="form-group">
            <label for="login">账号:</label>
            <input type="text" value="test1" name="loginname" id="login">
        </div>
        <div class="form-group">
            <label for="pwd">密码:</label>
            <input type="password" value="123456" name="password" id="pwd">
        </div>

在input中添加一个属性id，并在lable中添加一个for属性，然后将对应的值和其进行绑定即可，效果如下

1547793518227.jpg

也可以采取下面的方式来实现点击lable的时候，让输入框进入选中状态

            <label>
                重新输入密码:<input type="password" value="123456" name="password">
            </label>

datalist标签

给输入框绑定待选选项

            <input type="text" value="test1" name="loginname" id="login" list="cars">
            <datalist id="cars">
                <option>宝马</option>
                <option>奔驰</option>
                <option>奥迪</option>
                <option>大众</option>
                <option>别克</option>
                <option>宾利</option>
            </datalist>

将id绑定到input标签中的list属性，由于现在大部分浏览器不支持....所以可以了解

非input标签

select:用于定义下拉列表
不能进行输入，但是能进行选择

        <select>
            <optgroup label="小写字母">
                <option>a</option>
                <option>b</option>
                <option>c</option>
                <option>d</option>
                <option>e</option>
                <option selected="selected">f</option>//默认选中
            </optgroup>
            <optgroup label="大写字母">
                <option>A</option>
                <option>B</option>
                <option>C</option>
                <option>D</option>
                <option>E</option>
                <option selected="selected">f</option>//默认选中
            </optgroup>
        </select>

效果如下

1549009867185.jpg

textarea 相当于`ios`中的`TextView`可以无限换行

        <textarea cols="2" rows="2">

        </textarea>

可以通过cols和rows来指定列数和行数，但是还是可以无限往下输入，并且默认情况下可以通过鼠标进行拉伸