从零开始,一天成为form表单高手!

简介: 从零开始,一天成为form表单高手!

文本框(Input)


HTML中的文本框用于接收用户输入的文本信息。以下是创建一个简单文本输入框的示例代码:

<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username">
</form>

在上面的代码中,我们使用了 <input> 元素来创建一个文本框,并指定了 type="text",表示这是一个文本输入框。用户输入的内容将被赋予给 name 属性为 "username" 的变量。


单选框和复选框(Radio & Checkbox)


单选框用于让用户在多个选项中选择一个,而复选框则允许用户选择多个选项之一或多个。以下是单选框和复选框的示例代码:

<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男性</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label><br>
<input type="checkbox" id="vehicle1" name="vehicle1" value="bike">
<label for="vehicle1">自行车</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="car">
<label for="vehicle2">汽车</label><br>
</form>

b3f6ef6917f7bf091d074cdc58909e38.png

在上面的代码中,我们使用了 <input> 元素来创建单选框和复选框,并通过 type 属性来指定它们的类型。name 属性用于将选项分组,value 属性则表示选项的值。


下拉列表(Select)


下拉列表用于从预定义的选项中选择一个。以下是创建一个简单下拉列表的示例代码: 选择一种汽车: 沃尔沃SaabFiat奥迪


<form>
<label for="cars">选择一种汽车:</label>
<select id="cars" name="cars">
<option value="volvo">沃尔沃</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">奥迪</option>
</select>
</form>

60780b4f9d07c3d960a1562e216f1f62.png

在上面的代码中,我们使用了 <select> 元素来创建一个下拉列表,并使用 <option> 元素来定义列表中的选项。用户可以通过点击下拉列表来选择一个选项。


综合表单代码示例

<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username"><br><br>
  
  <label for="gender">性别:</label>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">男性</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女性</label><br><br>
  
  <label for="interests">兴趣爱好:</label>
  <input type="checkbox" id="coding" name="interest" value="coding">
  <label for="coding">编程</label>
  <input type="checkbox" id="reading" name="interest" value="reading">
  <label for="reading">阅读</label>
  <input type="checkbox" id="sports" name="interest" value="sports">
  <label for="sports">运动</label><br><br>
  
  <label for="country">选择您所在的国家:</label>
  <select id="country" name="country">
    <option value="china">中国</option>
    <option value="usa">美国</option>
    <option value="uk">英国</option>
    <option value="germany">德国</option>
  </select><br><br>
  
  <input type="submit" value="提交">
</form>

0afabcce887d67b50a83a707e0a7e2f7.png



通过上面的代码示例,我们创建了一个包含文本框、单选框、复选框和下拉列表的网页注册表单。用户可以填写用户名、选择性别、勾选兴趣爱好,并从下拉列表中选择所在国家。这个综合示例展示了HTML中常用的表单元素在一个表单中的综合应用。

相关文章
|
1月前
|
前端开发 数据安全/隐私保护
表单的一些基本知识
表单的一些基本知识
16 0
|
2月前
|
缓存 前端开发 数据可视化
前端基础(七)_表单的基本组成与使用
本文详细介绍了HTML表单的基本组成和使用,包括`<form>`标签、`<input>`表单域、`<select>`下拉列表、`<textarea>`多行文本域等元素。文章解释了表单的提交方式(GET和POST)、表单域的各种类型(文本、密码、单选按钮、复选框等)、提交按钮和重置按钮的作用,以及如何通过`<label>`标签提高表单的可访问性。此外,还讨论了表单元素的属性,如`readonly`、`disabled`、`maxlength`等。
27 1
|
4月前
|
移动开发 前端开发 JavaScript
Web表单(Form)开发实战指南
【7月更文挑战第8天】表单(Form)是Web应用程序中不可或缺的组成部分,用于收集用户输入的数据。本指南将详细介绍HTML表单的基本结构、数据提交方式、表单验证以及如何使用JavaScript和CSS增强表单的交互性和美观性。
171 0
|
6月前
|
存储 移动开发 开发框架
【零基础入门前端系列】—表单(七)
【零基础入门前端系列】—表单(七)
【零基础入门前端系列】—表单(七)
|
6月前
|
前端开发
前端知识笔记(七)———Get和Post的区别是什么?
前端知识笔记(七)———Get和Post的区别是什么?
67 0
|
前端开发
前端学习笔记202305学习笔记第二十一天-vue3.0-自定义form表单的验证
前端学习笔记202305学习笔记第二十一天-vue3.0-自定义form表单的验证
57 0
|
前端开发
前端学习笔记202305学习笔记第二十一天-vue3.0-实现Form表单的数据验证2
前端学习笔记202305学习笔记第二十一天-vue3.0-实现Form表单的数据验证2
60 0
|
前端开发
前端学习笔记202305学习笔记第二十一天-vue3.0-实现Form表单的数据验证1
前端学习笔记202305学习笔记第二十一天-vue3.0-实现Form表单的数据验证1
54 0
|
前端开发
前端学习案例-form表单的那些坑2
前端学习案例-form表单的那些坑2
44 0
前端学习案例-form表单的那些坑2
|
前端开发
前端学习案例-form表单的那些坑1
前端学习案例-form表单的那些坑1
75 0
前端学习案例-form表单的那些坑1