HTML基础学习（五）

最新推荐文章于 2020-05-30 16:13:39 发布

对不起该昵称已存在

最新推荐文章于 2020-05-30 16:13:39 发布

阅读量153

点赞数

分类专栏：自学

本文链接：https://blog.csdn.net/qq_43326818/article/details/88720421

版权

自学专栏收录该内容

12 篇文章 0 订阅

订阅专栏

所谓的表单其实就是用来传输数据的

1、发送表单数据:

使用form标签的属性action和method，其中action的值为要发送的目的地，也就是发送目的地的URL；而method指定的是发送的方式，包括GET和POST方法。
GET方法中浏览器会将数据直接附在表单的action URL之后，这两者之间用问号进行分隔。
POST方法首浏览器将与action属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器会按分段传输的方式将数据发送给服务器。
使用GET请求用户将在他们的URL栏中看到数据，但是使用POST请求洪湖将不会看到。因此一般GET用于查询数据，POST用于传输密码等。

2、表单验证（原生保单组件）：

表单验证也就是确保输入数据的格式正确，主要是加在input标签中，作为input的属性，其中input即为文本输入框，文本输入框是最基本的表单组件，它便于用户输入各种数据， HTML文本框只是个纯文本输入控件，也就是不能进行富文本编辑（如加粗、斜体等），富文本编辑器其实都是自定义的组件。

required属性规定输入值不能为空
min和max属性强制条目的长度
单行文本框，也就是输入的内容不能有换行符，即使输入的内容有换行符，其在发送数据的时候也会将换行删除,一般用法为：

<input type="text" id="text" id="text" value="I'm a text">

e-mail输入框，会自动检查是否为正确的email的形式:

<input type="email" id="email" name="email" multiple>
//通过设置multiple属性使得可以让用户输入多个e-mail地址

密码输入框：

<intput type="password" id="pwd" name="pwd">

搜索框:

<input type="search" id="search" name="search">

电话号码输入框：
```
<input type="tel" id="tel" name="tel>
```
URL输入框：
```
<input type="url" id="url" name="url">
```
多行文本框，使用元素，去与单行文本框的区别是其可以输入换行符：

<textarea cols="每行中的字符数" rows="显示的行数"></textarea>

下拉组件：
使用< select>< /select>（有属性size，可以指定下拉菜单的可见选项数）和< option>< /option>标签或者< datalist>然后使用list属性将数据列表绑定到一个文本域（input）。
在这两者中，如果对于某个选项是默认的，那么在< option>标签中添加属性selected="selected"。
关于< select>和< datalist>之间的区别：
< datalist>提供的选项只是建议型的，在选择的时候可以不选择选项中的，可以自己添加，但是< select>就不可以。
可勾选组件：复选框和单选框:
复选框：

<input type="checkbox" checked>

单选框：

<input type="radio" checked>

按钮：
提交文件：

<input type="file">

提交按钮：

<button type="submit">this is a submit button</button>//方法一
<input type="submit" value="this is a submit button">//方法二

重置按钮：就是将所有的内容设置为默认值而不是清空：

<button type="reset">name</button>
<input type="reset" value="name">

匿名按钮：没有自动生效的按钮，但是可以使用JavaScript代码进行定制：

<button type="button">name</button>
<input type="button" value="name">

3、构建HTML表单：

fieldset和legend元素，< fieldset>< /fieldset>元素组合表单中的相关数据，< legend>< /legend>元素为其定义标题。
label元素：一般与input一起使用，并且要求input的id的值与label的for值相同，从而起到绑定的作用，其作用是当用户选择该标签的时候，浏览器会自动将焦点转到和标签相关的表单控件上。也就是说点击这个标签和点击表单空间都会出现光标。

输入文本框的属性：
id：唯一标识，不允许重复。
name:可以重名，并且在将数据传输到数据库的时候是不可省略的。
value：控件的值。
综合应用的实例：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>表单综合案例：</legend>
                <label for="name">用户名：</label>
                    <input type="text" id="name" name="name" max="4">
                    <br>
                    <br>
                <label for="email">邮箱：</label>
                <input type="email" id="email" name="eamil">
                <br>
                <br>
                <laebl for="tel">电话号码:</laebl>
                <input type="tel" id="tel" name="tel">
                <br>
                <br>
                <label for="pwd">密码：</lebel>
                <input type="password" id="pwd" name="pwd">
                <br>
                <br>
                <input type="radio" id="man" name="man">
                <label for="man">男</label>
                <input type="radio" id="woman" name="woman">
                <label for="woman">女</label>
                <br>
                省（市）：
                <select>
                    <option>北京</option>
                    <option>上海</option>
                    <option>广东</option>
                    <option selected="selected">深圳</option>
                </select>
                市（区）：
                <select>
                    <optgroup label="北京市">//这里的oprgroup是在下拉列表里面进行分组的
                        <option>东城区</option>
                        <option>西城区</option>
                        <option>海淀区</option>
                    </optgroup>
                    <optgroup label="上海市">
                        <option>浦东区</option>
                        <option>长宁区</option>
                        <option>徐汇区</option>
                    </optgroup>
                </select>
                <br>
                <input type="checkbox" id="eat" name="eat" checked="checked">
                <label for="eat">吃饭</label>
                <input type="checkbox" id="sleep" name="sleep" checked="checked">
                <label for="sleep">睡觉</label>
                <input type="checkbox" id="paly" name="paly" checked="checked">
                <label for="paly">玩耍</label>
                <br>
                <textarea cols="100" rows="10"></textarea>
                <br><br>
                 <label for="color">你最喜欢什么颜色?</label>
                 <input type="text" id="color" name="color" list="suggest">
                 <datalist id="suggest">
                     <option>black</option>
                     <option>white</option>
                     <option>blue</option>
                 </datalist>
                 <br>
                 <br>
                 <input type="file">
                 <br>
                 <br>
                 <input type="submit" value="提交">
                 <button type="reset">重置</button>
            </fieldset>
        </form>
    </body>
</html>

效果图：
在这里插入图片描述

对不起该昵称已存在

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础学习（五）

发送表单数据表单验证(原生表单组件）构建HTML表单所谓的表单其实就是用来传输数据的1、发送表单数据:使用form标签的属性action和method，其中action的值为要发送的目的地，也就是发送目的地的URL；而method指定的是发送的方式，包括GET和POST方法。GET方法中浏览器会将数据直接附在表单的action URL之后，这两者之间用问号进行分隔...
复制链接

扫一扫