HTML常用标签之表单标签

admin · 发表于 2022-1-23 07:23:58

HTML常用标签之表单标签

前言
一、表单域
二、表单元素
1.input 输入表单元素
2.select 下拉表单元素
3.textarea 表单元素

前言
在网页中，我们需要跟用户进行交互，收集用户资料，此时就需要用到表单标签
在HTML中，一个完整的表单通常由表单域、表单控件（表单元素）和提示信息三个部分构成

一、表单域
表单域是一个包含表单元素的区域
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器
二、表单元素
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件

表单元素可分为三类，即：input输入表单元素、select下拉表单元素、textarea文本域元素

1.input 输入表单元素
<input>标签是一个单标签，用于收集用户信息

<input>标签的属性~

几个重要属性的作用~

文本框（text） <input type="text">
[mw_shl_code=applescript,true] <form action="#">
      <input type="text">
</form>
[/mw_shl_code]
密码框（password） <input type="password">
[mw_shl_code=applescript,true] <form action="#">
      <input type="password">
</form>
[/mw_shl_code]
单选按钮（radio） <input type="radio">
[mw_shl_code=applescript,true] <form action="#">
      性别：男<input type="radio">女<input type="radio">
</form>
[/mw_shl_code]
复选框（checkbox） <input type="checkbox">
[mw_shl_code=applescript,true] <form action="#">
      爱好：吃饭<input type="checkbox">睡觉<input type="checkbox">
</form>
[/mw_shl_code]
提交按钮（submit） <input type="submit">
[mw_shl_code=applescript,true] <form action="#">
      <input type="submit" value="提交">
</form>
[/mw_shl_code]
重置按钮（reset） <input type="reset">
[mw_shl_code=applescript,true] <form action="#">
      <input type="reset" value="重新填写">
</form>
[/mw_shl_code]
普通按钮（button）<input type="button">
[mw_shl_code=applescript,true] <form action="#">
      <input type="button" value="确认">
</form>
[/mw_shl_code]
文件域（file） <input type="file">
[mw_shl_code=applescript,true] <form action="#">
      上传头像：<input type="file">
</form>
[/mw_shl_code]
综合应用~
[mw_shl_code=applescript,true]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<form>
      
      用户名：<input type="text" value="请输入用户名"><br>
      
      密码：<input type="password"><br>
      
      
      
      性别：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
      
      爱好：吃饭<input type="checkbox"> 睡觉<input type="checkbox"> 打豆豆<input type="checkbox"><br>
      
      <input type="submit" value="免费注册">
      
      <input type="reset" value="重新填写">
      
      <input type="button" value="获取短信验证码"><br>
      
      上传头像：<input type="file">
</form>
</body>
</html>
[/mw_shl_code]
预览图~

2.select 下拉表单元素
使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表

注意点：
<select>中至少包含一对<option>
在<option>中定义selected=“selected”时，当前项即为默认选中项
代码实例~
[mw_shl_code=applescript,true]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
      籍贯：
      <select>
         <option>山东</option>
         <option>北京</option>
         <option>天津</option>
         <option selected="selected">火星</option>
      </select>
</form>
</body>
</html>
[/mw_shl_code]
预览图~

3.textarea 表单元素
当用户输入内容较多的情况下，我们可以用表单元素标签替代文本框标签，在表单元素中，<textarea>标签是用于定义多行文本输入的控件

代码实现~
[mw_shl_code=applescript,true]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
今日反馈：
<textarea>请在此输入内容</textarea>
</form>
</body>
</html>
[/mw_shl_code]
预览图~

		自动登录	找回密码
密码			立即注册