HTML基础语法（下）

作者: 罗永钦 | 来源:发表于2018-07-16 16:20 被阅读0次

表单（用户输入）

表单<input>标签。表单是给用户提供输入和操作的那些控件。
表单都是input标签，但是根据类型的不同，会产生不同的表单。常见的表单有：
输入框 <input type="text">，我们可以通过一些属性进行设置
- 可以设置这个输入框的长度，其属性为size：<input type="text" size="20">
- 输入框是进行内容输入的，我们也可以限制输入内容的长度，其属性为maxlength
- 输入框是用来做输入的，有时候存在不输入会自动给出默认值，其属性为：value
- 关于表单的区分，我们有id和name两种方式。
  - id是表单在页面上的相对位置或者说是表单的编号
  - name是输入的值所存储到哪个变量中
  - //html/body/input[2] --> 是第2个input标签的位置说明

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=gb2312" />
        <title>表单的使用</title>
    </head>
    <body>
        <!--实现普通的文本输入框-->
        普通文本输入框：
        <input type="text" id="1" name="user" size="20" maxlength="10" value="admin">
        另一个文本输入框：
        <input type="text" id="a" name="age" size="10" maxlength="10" value="qianli">
    </body>
</html>

注作业：

我们有最大长度限制，那应该有最小长度限制（不能为空），如何实现？
value="admin"是默认值，有一种提示这个要输入数据，鼠标点击到文本框中字就没有了。该提示信息的实现

参考答案：<input type="text" placeholder="请输入">

有一种输入框，跟普通文本输入框相似，但是输入的信息都会以*显示，这个叫做密码输入框。

密码输入框的实现是：<input type="password">，密码框的属性与普通文本输入框的属性基本相同。

注：我们输入了这些东西，应该要有一个按钮来进行提交，这时候才能够把用户输入的数据传送出去。

按钮：按钮有三种，分别是：button（普通按钮） submit（提交按钮） reset（重置按钮）
- 我们想让这个按钮的显示为：点击一下，火箭上天。其可以使用value属性

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=gb2312" />
        <title>表单的使用</title>
    </head>
    <body>
        <!--实现普通的文本输入框-->
        用户名：
        <input type="text" id="1" name="user" size="20" maxlength="10" value="admin"><br>
        <input type="submit" value="点击一下，火箭上天">
    </body>
</html>

提交表单<form>标签，该标签用来提交<form>到</form>中input表单用户输入的内容
- 我们在提交的时候，提交数据给哪个页面去处理？要有action属性
- 在处理的时候，有两种方式。分别为：GET和POST，其代码为：<form method="get">
- form表单还有一种叫做name的属性

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=gb2312" />
        <title>表单的使用</title>
    </head>
    <body>
        <!--实现普通的文本输入框-->
        <form action="http://www.baidu.com" method="get">
            用户名：
            <input type="text" id="1" name="user" size="20" maxlength="10" value="admin"><br>
            <input type="submit" value="点击一下，火箭上天">
        </form>
    </body>
</html>

GET和POST的区别

get请求中，我们用户输入的数据都会在URL中体现出来，以?后面接name变量和值，例如：http://xx.com/?user=admin，但是POST请求是不会在URL中体现数据来
相对而言，POST请求提交的数据前端看不到，所以更安全。
因为GET请求用户输入的数据在URL中，同时URL有最大长度限制（1024字节），所以GET请求一般只能够请求少量数据。
综上所述：如果用户需要提交数据，一般会选择POST请求。

reset按钮

reset本身是重置的意思，在这里，我们可以设计reset按钮来实现form标签组中的input控件回到初始值。

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>input表单的使用</title>
    </head>
    <body>
        <form action="https://www.baidu.com/s" method="get">
            <input id="kw" name="wd" type="text" />&nbsp;&nbsp;
            <input type="submit" value="百度一下">
        </form>
    </body>
</html>

单选框 radio

单选框常用于在一组选项中，只能够选择其中1个，如果选择中其中1个其他的被会置为取消状态。其实现代码为：
1. 要实现代码的单选，首先要让这两个radio是一个组的概念。设置两个radio的name是相同的即可。id是用来区别这两个单选框的，所以id是要不相同的。
2. 我们用value属性来确定这个radio的取值
3. 我们有时候遇到需要默认值的时候，怎么做？使用checked属性

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>input表单的使用</title>
    </head>
    <body>
        <form action="https://www.baidu.com/s" method="get">
            <!--使用radio实现单选框操作-->
            性别：<input type="radio" id="1" name="sex" value="male" checked="checked" /> 男
            <input type="radio" id="2" name="sex" value="female" checked /> 女
            <input type="submit" value="百度一下">
        </form>
    </body>
</html>

复选框checkbox

复选框可以实现多个选中，会产生多个值。与单选框的区别就只有type的值不相同，它的值为：checkbox

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>input表单的使用</title>
    </head>
    <body>
        <form action="https://www.baidu.com/s" method="get">
            <!--使用checkbox实现复选框操作-->
            爱好：<input type="checkbox" id="a" name="loved" value="sport" checked>运动
            <input type="checkbox" id="b" name="loved" value="talk" checked>聊天
            <input type="checkbox" id="c" name="loved" value="play">玩游戏
            <input type="submit" value="百度一下">
        </form>
    </body>
</html>

下拉列表select（选择列表）

实现的就是通过下拉菜单来选择我们需要的数据，我们需要使用select标签实现下拉框，需要使用option标签确定选项的值。
1. 要实现值的传递，在option中要确定value属性才能够获取到真正的下拉选项的值。
2. 值是应该传递给到一个name变量来存储，要写在select标签中
3. 要改变默认显示的值，用selected属性来实现

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>select表单的使用</title>
    </head>
    <body>
        <form action="https://www.baidu.com/s" method="get">
            <!--使用select实现下拉列表操作-->
            生日：<br> 月份：
            <select name="month">   <!--只是实现了下拉框的样式，真正的内容在下面-->
                <option value="jan">1月</option>
                <option value="feb" selected>2月</option>
                <option value="mar">3月</option>
            </select>
            <input type="submit" value="百度一下">
        </form>
    </body>
</html>

文本域<textarea>标签，实现的是多行文本输入，包含如下属性：
1. 也有name属性来保存用户输入的数据，记录的就是变量值，除了有name属性当然也少不了id属性
2. 有用户输入，意味着我可以有默认值，默认值用value="值"
3. 因为是多行文本输入，所以我们可以设置行数(rows)和列数(cols)

<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>select表单的使用</title>
    </head>
    <body>
        <form action="https://www.baidu.com/s" method="get">
            <textarea id="a1" name="block" value="这里是多行文本输入域" cols="10" rows="3">
            </textarea>
            <input type="submit" value="百度一下">
        </form>
    </body>
</html>

网友评论

本文标题：HTML基础语法（下）

本文链接：https://www.haomeiwen.com/subject/gbubpftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

HTML基础语法（下）

表单（用户输入）

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读