Python学习至Day39，如何高效掌握HTML表单制作技巧？

2026-05-22 07:081阅读0评论SEO问题

内容介绍
文章标签
相关推荐

本文共计1907个文字，预计阅读时间需要8分钟。

目录：HTML 表单 + 表单 + 属性 action + input 标签（输入元素） + 文本域（Text Fields） + 密码字段 + 单选按钮（Radio Buttons） + 复选框（Checkboxes） + 日期展示（date） + 邮箱格式数据（email） + 文件数据（file）

HTML-form表单
- form表单
  - 属性action
  - input标签(输入元素)
    - 文本域（Text Fields）
    - 密码字段
    - 单选按钮（Radio Buttons）
    - 复选框（Checkboxes）
    - 日历展示（date）
    - 邮箱格式数据（email)
    - 文件数据（file）
    - 重置页面填写的数据（reset）
    - 注
  - 触发form表单提交数据的动作
  - select标签
  - textarea标签
  - lable标签
  - 网络请求方式
- 附个表格

HTML-form表单

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

form表单

表单是一个包含表单元素的区域。

获取前端用户数据并发送给后端服务器

# 表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

# 表单使用表单标签 <form> 来设置: <form action=""> input 元素 </form> # input 元素：<input type="" name="">

需要在form标签内部编写获取用户数据标签

属性action

控制数据的提交地址

# 方式1:写全路径 action="www.aa7a.cn/user.php" # 方式2:写后缀(自动补全IP和PORT) action="user.php" # 方式3:不写(朝网页所在的地址提交) action="" '''URL:统一资源定位符(网址)''' input标签(输入元素)

定义输入域，是获取用户各中类型数据的标签

多数情况下被用到的表单标签是输入标签（<input>）。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

文本域（Text Fields）

正常展示的普通文本

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

<form> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> </form>

注:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

密码字段

密码字段通过标签<input type="password"> 来定义:

<form> Password: <input type="password" name="password"> </form>

注:密码字段字符不会明文显示，而是以星号或圆点替代。

单选按钮（Radio Buttons）

<input type="radio"> 标签定义了表单单选框选项可以通过添加checked="checked"设置默认值 ps:如果属性名和属性值相同可以简写checked

<form> <p>性别: <input type="radio" name="sex" value="male">男 <input type="radio" name="sex" checked value="female">女 <input type="radio" name="sex" value="others">其他 </p> </form>

注：当用户点击一个单选按钮时，它就会被选中，其他同名的单选按钮就不会被选中。

复选框（Checkboxes）

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。可以通过添加checked="checked"设置默认值 ps:如果属性名和属性值相同可以简写checked

<form> <p>爱好: <input type="checkbox" name="hobby" value="basketball" checked>篮球 <input type="checkbox" name="hobby" value="football">足球 <input type="checkbox" name="hobby" value="volleyball" checked>排球 </p> </form>

日历展示（date）

<form> 生日: <input type="date" name="birthday"> </form>

邮箱格式数据（email)

<form> 邮箱:<input type="email" name="email"> </form>

文件数据（file）

可以通过添加multiple属性控制获取单个还是多个文件

<form> <p>单个文件: <input type="file" name="single_file"> </p> <p>多个文件: <input type="file" multiple name="files_list"> </p> </form>

重置页面填写的数据（reset）

<form> <input type="reset" value="重置"> </form> 注

""" input标签中有两个非常重要的属性 1.name属性类似于字典的key(前端程序员写) 2.value属性类似于字典的value(用户自己传) 如果标签是选择类型的那么还需要前端程序员自己填写value 用于区分具体数据含义 ps:我们在编写input标签的时候应该添加name属性 """ 触发form表单提交数据的动作

能够触发form表单提交数据动作的标签有两个

1.input的 type=submit 2.button标签 # 普通按钮默认没有任何的功能(意味着以后可以给它添加任意的功能)

<form> <p> <input type="submit" value="注册"> <button>点我也可以注册</button> <input type="reset" value="重置"> <input type="button" value="普通按钮"> </p> </form>

select标签

定义了下拉选项列表

在 HTML 页面中创建简单的下拉列表框。下拉列表框是一个可选列表。

若想创建一个简单的带有预选值的下拉列表，只需加入selected属性

<form action=""> <p>省市: <select name="province" id=""> <option value="BJ">北京</option> <option value="SH" selected>昆明</option> <option value="SZ">深圳</option> </select> </p> </form>

一个个的下拉选项是一个个option标签 # 默认是单选，也可以添加multiple变成多选 textarea标签

定义文本域 (一个多行的输入控件)，获取大段文本内容

<textarea name="desc" rows="10" cols="30"> 我是一个文本框。 </textarea

lable标签

定义了 <input> 元素的标签，一般为输入标题

专门给input标签配文字说明也可以不使用

# 方式1 <label for="d1">用户名:</label> <input type="text" id="d1"> # 方式2 <label>用户名: <input type="text"> </label> 网络请求方式

最常见的网络请求方式有两种

1.get请求：朝服务端索要数据 2.post请求：朝服务端提交数据

两种请求都可以携带数据

# get请求是在url后面通过?组织数据 url?name=jason&pwd=123&email=123@qq.com # post请求是在请求体中组织数据 HTTP协议请求数据格式 ''' get请求虽然可以携带数据但是一般只用于不重要的数据携带并且get请求携带数据的大小有限制最多只能携带2KB左右 ''' form表单中有一个method属性用于控制提交的方式有两个选项默认是get请求 附个表格

标签：Python 学习 Day39HTMLform 表单