demo6--html中input的使用1

input作为输入函数，在html中格外重要，输入框，搜索框无处不在，在如此的一个背景下，对于一个计算机学者来说，尤为重要。总体介绍一下input，其为单标签，并且其输入框是默认带有边框颜色的。那么接下来就让我们一步步来了解它吧。

基础写法：

<input type="" name="" id="" value="" placeholder="">

type：决定input的输入类型，可能会是输入字符串，也可能会是选择，还可以是一个按钮。

name和id：可以用来区分input的使用位置或者说是名字，单不同的是name可以不唯一，而id唯一。

value：输入的内容的记录。

placeholder：为输入字符串时其显现的内容

6.1  type="text"

<div>输入框：<input type="text" name="firstInput" id="1" value="" placeholder="写下你想说的吧"></div>

6.2  type="password"

<div><type-password:<input type="password" name="password" id="2" value=""></div>

如图所示，第二行就是将type设置成password的结果，其字体全部都会用小点点来表示，通过此方法来保护用户输入密码时的安全性。而我们也可以用这个原理做出一个用户登录界面的雏形，具体可以去到我的主页内翻看demo4的结尾部分。

6.3  type="checkbox"，type="radio"，label使用

<div>
            喜欢：
            <input type="checkbox" name="hobby" id="hobby1" value="唱">唱
            <input type="checkbox" name="hobby" id="hobby2" value="跳">跳
            <input type="checkbox" name="hobby" id="hobby3" value="rap">rap
        </div>

checkbox为多选选项，可以同时进行多个选项的勾选。如果只是想要只能让某个选项勾选则需要使用radio标签。代码如下

<div>
            性别：
            <input type="radio" name="sex" id="sex1" value="男">男
            <input type="radio" name="sex" id="sex2" value="女">女
        </div>

像这样如果只能是选一个的话，必须要保证选项名字一致，即name值需要一样，如果name值不统一那么就会变成多选选项，而且这种情况下一段选定则无法取消，其效果如下

现在我们已经悉知当type="radio"和type="checkbox"下input的一个显示情况了，不过这里我们发现，如果我们只是去点选项的汉字不会将选项标勾的，但是我们平时在使用手机、使用平板的时候可能会由于按钮大大小，从而难以点到按钮选项。所以这个问题是需要我们去解决的，其中一种解决方法就是使用label标签将input内容包裹起来，那么在此，将对于上述两串代码进行改进，代码如下：

        <p>
            喜欢：
            <label for="hobby1">
                <input type="checkbox" name="hobby" id="hobby1" value="唱">唱
            </label>
            <label for="hobby2">
                <input type="checkbox" name="hobby" id="hobby2" value="跳">跳
            </label>
            <label for="hobby3">
                <input type="checkbox" name="hobby" id="hobby3" value="rap">rap
            </label>
        </p>

        <p>
            性别：
            <label for="sex1">
                <input type="radio" name="sex" id="sex1" value="男">男
            </label>
            <label for="sex2">
                <input type="radio" name="sex" id="sex2" value="女">女
            </label>
        </p>

在修改后，我在每一个input外面都包上了一个label，那么在经过这样的一个改进我们将会在点击元素内容时为选项勾上标签，不过值得一提的是，在label里的for值要等于选项的id，就比如在type="checkbox"时label的 for值赋为input的id。

6.4  type="date"

<input type="date" name="birth" id="4" value="">

点击如图所示位置即可选择。

6.5  type="color"

<input type="color" name="color_select" id="5" value="">

6.6  type="number"

<input type="number" name="number" id="6" value="0" max="" min="">

此为数值输入，value即为初始值，在这里我将其设置成了0，在框内右边有两个箭头，一个是向上，一个是向下，顾名思义就是一个加，一个减，其可以为负数，所以我们在使用这个的时候，也可以通过max和min分别控制这个数字的最大值和最小值。

在此demo6中input的主要使用内容就完结了，但是input的使用还是有很多类型，在这里先不对他进行介绍了，而是放在后面会出一个html内input的使用2再次延续这章讲解。

在此我还要介绍一种输入和textarea的使用，这个输入方式于其说是输入，不如说他是选择器。

select标签的用法

<select name="city" id="city_choose">
        <option value="请选择" selected>请选择</option>
        <option value="长沙">长沙</option>
        <option value="湘潭">湘潭</option>
        <option value="株洲">株洲</option>
        <option value="衡阳">衡阳</option>
    </select>

在代码中selected可以设置初始状态下显示哪个选项，如上图，我选择”请选择“选项，即在对其做任何行动时展示这个option内的内容，而option内的value等一些语句类似于input语句。

textarea标签的使用

<textarea rows="5">111111111111111111111111111111111111111111111111111111111111111111111111111111111111</textarea>

textarea与input很像，但是其本质区别就是，textarea的输出可以多行，在上述代码中我设置了其rows=5，那么我们可以很清楚直白地看到其显示出来就会有五行。