常见的HTML表单组件

Sᴀғᴇᴛʏ 007

已于 2022-10-08 14:09:41 修改

阅读量741

点赞数 1

分类专栏： html标签文章标签： html

于 2020-08-03 18:16:43 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44437620/article/details/107770454

版权

html标签专栏收录该内容

2 篇文章

订阅专栏

HTML表单

关键字 form

HTML 表单包含表单元素

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

text：定义常规文本输入。
radio：定义单选按钮输入。
submit：定义提交按钮

在这里插入图片描述

form标签所带属性

在这里插入图片描述

表单文本框
基本语法：

<input type="" name="" id="" value="" />

当“type”属性为“text”时，此input标签是个文本框。

文本框实例：

<form action="" method="post" name="firstForm" >
		    <label for="username">用户名：</label>
		    <input type="text" id="username" name="username" value="用户名"/><br/>
		    <label for="passwd">密码：</label>
		    <input type="password" id="passwd" name="passwd"/>
		</form>

运行结果：
在这里插入图片描述

表单单选框
基本语法：

<input type="radio" name="" id="" value="" />

单选框实例：

<form action="" method="post"  name="firstForm"/>
		    <label for="male">男</label>
		    <input type="radio" id="male" name="gender"/>
		    <label for="felmale">女</label>
		    <input type="radio" id="felmale" name="gender"/>
		</form>

运行结果：
在这里插入图片描述
注：两个单选框的name属性必须相同才能关联起来。

表单复选框
基本语法：

<input type="checkbox" name="" id="" value="" />

复选框实例：

<form>
		<label for="b">篮球</label>
		<input type="checkbox" name="sport" id="b"/>
		<label for="f">足球</label>
		<input type="checkbox" name="sport" id="f"/>
		<label for="c">棒球</label>
		<input type="checkbox" name="sport" id="c"/>
		<label for="d">兵乓球</label>
		<input type="checkbox" name="sport" id="d"/>
		</form>

运行结果：
在这里插入图片描述

表单按钮控件

三种按钮基本语法：

        <input type="submit" value="提交" /><!-- 提交按钮 -->
		<input type="button" value="点击" /><!-- 点击按钮 -->
		<input type="reset" value="重置" /><!-- 重置按钮 -->

运行结果：
在这里插入图片描述
下拉框select元素

基本语法：

        <select>
		    <option value=" ">XXX</option>
		</select>

select下拉标签属性
在这里插入图片描述
下拉框实例：

年级：<select>
		    <option value="2016">2016级<option>
		    <option value="2015">2015级<option>
		    <option value="2014">2014级<option>
		    <option value="2013">2013级<option>
		</select>

运行结果：
在这里插入图片描述

代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>表单练习</title>
  </head>
 <body>
<form action="" method="post">
<fieldset id="">
    <!-- 单选框 radio -->
    <legend>Group Three</legend>
    学校信息:<input type="radio" name="sex" value="" />兰州理工大学
      <input type="radio" name="sex" value="" />四川师范大学
      <input type="radio" name="sex" value="" />清华大学
      <br/>
      
    <!-- 拉伸选择框 option -->
    年级信息:
    <select>
      <option value="2017级">2017级</option>
      <option value="2018级">2018级</option>
      <option value="2019级">2019级</option>
      <option value="2020级">2020级</option>
      <option value="2021级">2021级</option>
      <option value="2022级">2022级</option>
    </select>
    <br/>
    
   <!-- 多选框  checkbox-->
    掌握技能:
    <input type="checkbox" name="sex" value="" />冒泡
    <input type="checkbox" name="sex" value="" />吐槽
    <input type="checkbox" name="sex" value="" />耍宝
    <input type="checkbox" name="sex" value="" />讲段子
    <input type="checkbox" name="sex" value="" />美图
   </fieldset>
   
   <!-- 可拉伸框  textarea-->
   <p >请留下您的宝贵意见:</p>
   <textarea rows="16px" cols="50px">
   </textarea>
   </form>
   </html>

总结

在这里插入图片描述