HTML学习笔记13-HTML表单

Myth丶恋晨 2021-10-30 01:22 447阅读 0赞

一、什么是表单(form)

用于收集用户信息

二、什么是表单元素

表单元素指的是不同类型的input元素。输入框、单选框、复选框、按钮等

三、input标签的常见类型

1.输入框

1.1 type="text"

作用：用于输入明文信息

语法：

<form>
        明文输入框：<input type="text">
    </form>

1.2 maxlength="最大长度"

作用：用于定义输入框的最大输入长度

语法：

明文输入框：<input type="text" maxlength="5">

1.3 type="password"

作用：用于定义暗文输入框

语法：

暗文输入框：<input type="password">

1.4 value="默认值"

作用：用于设置输入框的默认值

语法：

有默认值输入框：<input type="text" value="123">

2.单选框

2.1 type="radio"

作用：用于定义单选框

语法：

单选框：
        <input type="radio"> 男
        <input type="radio"> 女

2.2 name="值"

作用：name相同的单选框只能勾选一个

语法：

单选框：
        <input type="radio" name="gender"> 男
        <input type="radio" name="gender"> 女

2.3 checked

作用：用于定义单选框的默认勾选

语法：

单选框：
        <input type="radio" name="gender" checked> 男
        <input type="radio" name="gender"> 女

3.复选框

3.1 type="checkbox"

作用：用于定义复选框

语法：

复选框：
        <input type="checkbox">足球
        <input type="checkbox">篮球
        <input type="checkbox">羽毛球

注意：复选框的默认勾选与单选框相同

4.按钮

4.1 type="button"

作用：用于定义普通按钮

语法：

4.2 type="image"

作用：用于定义图片按钮

语法：

<input type="image" src="images/2.jpg">

4.3 type="reset"

作用：用于清空表单的内容

语法：

<input type="reset" value="清空">

4.4 type="submit"

作用：用于提交表单内容。form标签的action属性指定提交的服务器。input标签含name属性的表单内容都可以提交。

语法：

<input type="submit" value="登录">

4.5 type="hidden"

作用：隐藏域，用于在用户无感知的情况下，向服务器提交数据

语法：

<input type="hidden" name="测试" value="123">

5.label

作用：将文字和输入框进行关联，点击文字时，输入框会聚焦

语法1：

1.  给输入框定义id属性
2.  给文字添加label语义
3.  将label标签的for属性值定义为输入框id属性的值

语法2：

将要关联的文字和输入框用同一个label进行修饰。假如此时有两个输入框，用户名和密码，需要将用户名和密码输入框进行关联，语法2是无法实现的，只能通过语法1实现。

6.datalist

作用：给输入框定义待选列表

语法：

1.  定义一个输入框
2.  定义一个datalist
3.  给datalist定义id属性
4.  将datalist id属性的值赋给输入框的list属性

车型：<input type="text" list="cars">
        <datalist id="cars">
            <option>奥迪</option>
            <option>奔驰</option>
            <option>奥拓</option>
        </datalist>

四、非input标签

1.select标签

作用：用于定义下拉框

语法：

2.textarea标签

作用：用于定义多行输入框

语法：

<textarea cols="30" rows="10"></textarea>