HTML表单

最新推荐文章于 2024-07-17 22:23:53 发布

Xucc_

最新推荐文章于 2024-07-17 22:23:53 发布

阅读量1.6k

点赞数 3

分类专栏：前端文章标签： HTML 表单输入

本文链接：https://blog.csdn.net/weixin_40739833/article/details/81266395

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML表单用于搜集不同类型的用户输入。

表单的一系列操作都要定义在<form>标签内，就像表格要定义在<table>标签中一样。

示例如下：

<!DOCTYPE html>
<html>
<body>
    <form>
        userName:<br>
        <input type="text" name="userName">
        <br>
        password:<br>
        <input type="password" name="password">
    </form>
</body>
</html>

显示效果：

页面效果

2.<form>标签

form标签中有很多的属性，用来定义表单的不同操作。

<form>标签属性：

标签	描述
action	指向表单处理程序(某个服务器脚本)，默认为当前页面
method	规定在提交表单时所用的 HTTP 方法(get/post)
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）
autocomplete	规定浏览器应该自动完成表单（默认：开启）
enctype	规定被提交数据的编码（默认：url-encoded）
name	规定识别表单的名称（对于DOM使用：document.forms.name）
novalidate	规定浏览器不验证表单
target	规定 action 属性中地址的目标（默认：_self

3. <fieldset>标签组合表单数据

<fieldset>标签将其内部的所有表单元素在显示上用一个框框起来

legend属性定义方框的标题

<!DOCTYPE html>
<html>
<body>
    <form>
        <fieldset>
            <legend>Personal information:</legend>
            First name:<br>
            <input type="text" name="firstname" value="liu">
            <br>
            Last name:<br>
            <input type="text" name="lastname" value="yiming">
            <br><br>
            <input type="submit" value="Submit">
        </fieldset>
    </form>
</body>
</html>

显示效果：

4. 表单元素

4.1 下拉表单

<select>定义下拉列表：
- name：下拉列表的名字

<option>定义下拉列表选项：
- selected：表示该选项为下拉列表默认展示值
- value：选项的值

<!DOCTYPE html>
<html>
<body>
    <form>
        <select name="cars">
        <option value="Benz>奔驰</option>
        <option value="BMW">宝马</option>
        <option value="Audi">奥迪</option>
        <option value="Ford">福特</option>
        </select>
        <br><br><br><br>
        <input type="submit" value-"提交">
    </form>
</body>
</html>

显示效果：

显示效果

4.2 <textarea>标签

<textarea>多行输入文本，文本右下角可以调整大小。
- row，col：多行文本的初始大小。

4.3<button>标签

<button>定义可点击的按钮，点击后可弹出弹窗。

<!DOCTYPE html>
<html>
<body>
    <form>
        <button type="button" onclick="alert('Hello World!')">点击我！</button>
    </form>
</body>
</html>

4.4 <datalist>标签

将\元素最终的值设置一个下拉列表进行选择。

<!DOCTYPE html>
<html>
<body>
    <form action="action_page.php">
        <input list="cars">
        <datalist id="cars">
            <option value="Benz">
            <option value="Audi">
            <option value="BMW">
            <option value="Ford">
        </datalist>
        <input type="submit" value="提交">
    </form>
</body>
</html>

4.5 <checkbox>标签

<checkbox>定义复选框(允许用户在有限数量的选项中选择零个或多个选项)，和datalist一样，但是样式不同。

5. <input>标签输入属性

value属性规定输入字段的默认值。
readonly 属性规定输入字段为只读，可以用value设置默认值，再将默认值设置为只读，即不能输入。如果没有默认值且设置只读，那么无法输入。
disabled 属性规定输入字段是禁用的，被禁用的元素是不可用和不可点击的，被禁用的元素不会被提交。
maxlength规定输入字段允许的最大长度属性规定输入字段允许的最大长度

Xucc_

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
HTML表单

HTML表单用于搜集不同类型的用户输入。表单的一系列操作都要定义在&lt;form&gt;标签内，就像表格要定义在&lt;table&gt;标签中一样。1. &lt;input&gt;标签表单由表单元素组成，表单元素指的是不同类型的 input 元素。&lt;input&gt;标签来表示这些元素，&lt;input&gt;有很多形态(type形态)，根据不同的 type 属性值，...
复制链接

扫一扫