从零开始,一天成为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中常用的表单元素在一个表单中的综合应用。

相关文章
|
4月前
|
前端开发
前端知识笔记(七)———Get和Post的区别是什么?
前端知识笔记(七)———Get和Post的区别是什么?
52 0
|
10月前
|
前端开发
前端笔记:React的form表单全部置空或者某个操作框置空的做法
在React框架前端开发中,经常会有弹出框的开发,涉及到弹出框,难免就会有表单。一般在关闭弹出框或者对表单联动时,往往都需要考虑对表单进行置空操作了。
83 0
|
前端开发
前端学习笔记202305学习笔记第二十一天-vue3.0-实现Form表单的数据验证2
前端学习笔记202305学习笔记第二十一天-vue3.0-实现Form表单的数据验证2
55 0
|
前端开发
前端学习笔记202305学习笔记第二十一天-vue3.0-实现Form表单的数据验证1
前端学习笔记202305学习笔记第二十一天-vue3.0-实现Form表单的数据验证1
47 0
|
前端开发
前端学习笔记202305学习笔记第二十一天-vue3.0-自定义form表单的验证
前端学习笔记202305学习笔记第二十一天-vue3.0-自定义form表单的验证
51 0
|
移动开发 小程序 开发者
微信小程序学习实录1(wxml文档、引入weui、双向数据绑定、提交表单到后端)
微信小程序学习实录1(wxml文档、引入weui、双向数据绑定、提交表单到后端)
196 0
|
前端开发
前端学习案例-form表单的那些坑1
前端学习案例-form表单的那些坑1
69 0
前端学习案例-form表单的那些坑1
|
前端开发
前端学习案例-form表单的那些坑2
前端学习案例-form表单的那些坑2
39 0
前端学习案例-form表单的那些坑2
|
SQL 前端开发 数据库
Yii2.0的模型表单、活动表单和AJAX表单是干什么的?底层原理是什么?
Yii2.0的模型表单、活动表单和AJAX表单是干什么的?底层原理是什么?
102 0
|
数据采集 SQL 前端开发
【jquery Ajax 】form表单教学+评论案例
【jquery Ajax 】form表单教学+评论案例
147 0
【jquery Ajax 】form表单教学+评论案例