2023面试高手

这个屌丝很懒，什么也没留下！

热门标签

表单的基础梳理_html5如何设置表单的文本框不能为空,提示信息如何改变

作者：2023面试高手 | 2024-03-24 20:34:18

踩

html5如何设置表单的文本框不能为空,提示信息如何改变

定义：一个完整的表单通常由表单控件、提示信息和表单域3部分构成。
在这里插入图片描述

一创建表单

form

<form></form>用于定义表单域，即创建一个表单。form会将所有的内容提价给服务器
<form action="url地址" method="提交方式" name="表单名称"></form>
action属性用于指定接受处理表单数据的服务器程序的url地址。
1
2
3

method

属性	取值
method	get（默认值）
method	post

get:提交的数据将显示在浏览器的地址栏中，保密性差，数据量有限	一个步骤中一次性提交
post:保密性好，无数据量的限制。	先建立联系，后分段将数据发送到服务器程序

name

指定表单的名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#" method="post" name="tutu">
        账号：
        <input type="text">
        <br><br>
        密码：
        <input type="password">
        <br><br>
        <input type="submit" value="提交">
        <br><br>
        <button>提交</button>
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

二表单控件

表单控件大致可分为input控件、textarea控件、select控件三大类。

input控件

<input type="控件类型"/> 
1

在这里插入图片描述

补充：实际运用中，常常控件与标签使用，以扩大控件的选择范围，例如，在选择性别时，点击提示文字“男”，“女”，也可以选中相应的单选按钮。

        性别：
        <input type="radio" id="man" name="sex" checked><label for="man"  >男</label>
        <input type="radio" id="woman" name="sex"><label for="woman"  >女</label>
        <!-- radio单选--属性值；
        id与lable标签的for组合--增加点文字选中功能；
        name的共同名称设置只能选中一个，避免出现又男又女的怪物 -->
1
2
3
4
5
6

使用lable标签包含表单中的提示信息，并将for属性的值设置为相应的表单控件的id名称，这样< lable >标签标注的内容就绑定到了id的表单控件上，当点击lable 标签的内容时，相应的表单控件就处于选中的状态。

        <label for="name">名字</label>
        <input type="text" id="name" maxlength="6"> 
1
2

完整的代码，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#" method="post" name="tutu">
        用户名：
        <input type="text" maxlength="12"  placeholder="请输入用户名" value="ss">
        <!-- value会将placeholder的文字覆盖 ，当输入框清空时，placeholder内容出现-->
        <br><br>
        密码：
        <input type="password" size="20" maxlength="18">
        <br><br>
        <label for="name">名字</label>
        <input type="text" id="name" maxlength="6"> 
        <br><br>
        性别：
        <input type="radio" id="man" name="sex" checked><label for="man"  >男</label>
        <input type="radio" id="woman" name="sex"><label for="woman"  >女</label>
        <!-- radio单选--属性值；
        id与lable标签的for组合--增加点文字选中功能；
        name的共同名称设置只能选中一个，避免出现又男又女的怪物 -->
        <br><br>
        兴趣：
        <button >ss</button>
        <input type="checkbox">ss
        <input type="checkbox">ss
        <input type="checkbox">ss
        <br><br>
        <input type="file">
        <br><br>
        <input type="reset">
        <br><br>
        <input type="submit">
        <br><br>
        <input type="button" >
        <br><br>
        <input type="image" src="./4d7b8a34033404f89fc2eb9e3539ba6b.jpeg">
        <br><br>
        <input type="submit" value="提交">
        <br><br>
        <button>提交</button>
    </form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

textarea控件

作用：多行文本输入框

<textarea cols="每行中的字符数" rows="显示的行数">
<!-- rows cols 取值为正整数-->
文本内容
</textarea>
1
2
3
4

可选属性

属性	属性值	描述
name	用用户自定义	空间的名称
readonly	readonly	该控件内容为只读（不能修改编辑）
disable	disable	第一次加载页面时禁用该控件（显示为灰色）

        <textarea name="" id="" method="post" cols="30" rows="10">慢慢写</textarea>
        <input type="submit" value="提交">
1
2

select控件

作用：表单中添加下拉菜单
语法格式：

<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
<!--option嵌套于select中，定义具体的选项-->
</selecrt>
1
2
3
4
5
6

select,optionb标签定义的标签属性

标签名	常用属性	描述
< select >	size	指定下拉菜单的可见旋向数（取值为整数）
< select >	multiply	定义multiple=“multiple”时，下拉菜单将具有多项选择的功能，方法为按住ctrl键的同时选择多项
< option >	selected	selected=“selected”,当前几位默认的选中项

        <select multiple >
            <!-- size="1"的效果不是很习惯 -->
            <option >-请选择-</option>
            <option  selected="selected">-1-</option>
            <option  >-2-</option>
            <option >-3-</option>
            <option >-5-</option>
            <option >-6-</option>
1
2
3
4
5
6
7
8

三 HTML5表单新属性

autocomplete属性用于所有的输入的标签中	用于指定表单是否有自动完成功能。说白了就是将你输入的历史内容存下来，当再次输入时，会将输入的历史纪录显示在一个下拉菜单里。
autocomplete属性值	on/off
novalidate属性	指定在提交表单时取消对表单进行有效的检查。（取自为其本身）

全新的表单属性

1. datalist控件

网页中的列表通过datalist内的option进行创建。如果用户不希望从列表中选择某项，也可以自行输入其他内容。datalist控件通常与input控件配合使用，来定义input的取值。在使用控件时，需要通过id属性为其指定一个唯一的标识，然后为input控件指定list属性，将该属性值设置为datalist对应的id属性值即可。

            <form action="#" method="post" >
                用户名：<input type="text" list="namelist">
                <datalist id="namelilst"> 
                    <option >a</option>
                    <option value="">b</option>
                    <option value="">c</option>
                    <option value="">d</option>
                </datalist>
1
2
3
4
5
6
7
8

    <form action="#" method="post" >
        用户名：
        <input type="text" list="namelist"/>
        <datalist id="namelist"> 
            <option >a</option>
            <option >b</option>
            <option >c</option>
            <option >d</option>
        </datalist>
        省份：
        <input type="text" list="province">
        <datalist id="province">
            <option>陕西</option>
            <option>山西</option>
            <option>湖北</option>
            <option>湖南</option>
            <option>广东</option>
            <option>广西</option>
        </datalist>
    </form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2. 全新的input控件类型

email类型

< input type="email" />
1

email类型的input元素是一种专门用于输入E-mail地址的文本输入框，用来验证email输入框的内容是否符合Email邮件地址格式；如果不符合，将提示相应的错误信息。

url类型

< input type="url" />
url类型的input元素是一种用于输入URL地址的文本框。

tel类型

< input type="tel" />
1

tel类型用于提供输入电话号码的文本框，由于电话号码的格式千差万别，很难实现一个通用的格式。因此，tel类型通常会和pattern属性配合使用。

color类型

<input type="color" />
1

color类型用于提供设置颜色的文本框，用于实现一个RGB颜色输入。其基本形式是#RRGGBB，默认值为#000000，通过value属性值可以更改默认颜色。

number类型

<input type="number" />
1

number类型的input元素用于提供输入数值的文本框。在提交表单时，会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内，则会出现错误提示。

range类型

<input type="range" />
1

range类型的input元素用于提供一定范围内数值的输入范围，在网页中显示为滑动条。它的常用属性与number类型一样。

<!DOCTYPE html>
<html>
<head>
    <meat charset="UTF-8">
    <title>tDocument</title>
    
</head>
<body>
    <form action="#" method="post">
        请输入你的邮箱：
        <input type="email" name="formail"><br>
        请输入个人号码：
        <input type="tel" name="telphone" list="nu">
        <datalist id="nu">
            <option value="1"></option>
            <option value="2"></option>
            <option >3</option>
            <option >4</option>
            <option >5</option>
            <option >6</option>
            <!-- 第一种方式：value="内容"<option value="1"></option>
            第二种方式：没有value="" 在option中间书写<option >3</option>-->
        </datalist>
        省份：
        <input type="text" list="province">
        <datalist id="province">
            <option>陕西</option>
            <option>山西</option>
            <option>湖北</option>
            <option>湖南</option>
            <option>广东</option>
            <option>广西</option>
        </datalist>
        <br>
        请输入个人网址：
        <input type="url" name="user_url"><br>
        请输入搜索关键词：
        <input type="search" name="search_info"><br>
        请选取一种颜色：
        <input type="color" type="color" name="color1"><br>
        <input type="submit" >
    </form>
</body>
</thml>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44