HTML常用表单元素使用

1.什么是表单？表单用来干嘛

HTML表单是一种用于收集用户输入数据的交互性元素。它可以用于创建各种类型的表单，如用户注册、登录、搜索等。表单允许用户在网页上输入数据，然后将这些数据提交给服务器进行处理。表单通常包含各种输入字段，例如文本框、复选框、单选按钮、下拉列表等，以及提交按钮，用于将用户输入的数据发送到服务器。服务器可以根据收到的数据执行相应的操作，例如保存用户信息、执行搜索操作等。HTML表单的作用是促使用户与网站进行交互，并在后台进行处理以满足用户需求。

1.1表单介绍

表单分为三个部分，表单域、表单元素、提交信息。
   表单域的标签是:

<form>
	表单域	
</form>

   表单元素的标签是:

<form>
	<input type="">	
</form>

   提交信息的标签是:

<form>
	<input type="button"value="按钮">
    <button>按钮2</button>
</form>

2.表单基础内容

2.1   form标签:

action=“url地址”            数据要传送到的地方
method=“提交方式”       有get(请求获取数据)和post(发送数据到后台，传递数据，创建数据)可以选择
name=“表单域名称”       定义一个名字

代码演示：

<!--传递数据到www.baidu.com地址-->
<form action="www.baidu.com" method="post" name="biaodan">  
</form>

2.2常用的表单标签：

文本框： text

<input type="text" value="文本框">

密码框： password

密码<input type="password">

单选框：radio

<!-- 单选框    -->
性别<input type="radio" name="sex1">男
<input type="radio"name="sex1">女

注* 需要注意的是 单选框需要给元素添加name属性 name相同才能实现单选

复选框：checkbox

<!--复选框  -->
爱好<input type="checkbox" >音乐<input type="checkbox">游戏<input type="checkbox">篮球

<!--如果想默认☑爱好的话可以在input标签中加上  checked属性 默认选中-->

邮箱：email

邮箱<input type="email">

电话：tel

电话<input type="tel">

数字框：number

<!--只能填写数字 -->
数字框<input type="number">

邮箱：email

邮箱<input type="email">

网址：url

url<input type="url">

文件上传：file

文件上传：<input type="file">

滑块：range

滑块<input type="range">

下拉框：select

 <!-- 下拉列表   <option> 选项值-->
  <select name="s1" >
        <option>长沙</option>
        <option selected>湘潭</option> <!-- selected指定默认选中 -->
        <option>深圳</option>
    </select>

文本域：textarea

个人简介<textarea name="t1"  cols="20" rows="3"></textarea>
<!--cols 设置列数 rows 设置行数-->

日历时间：date

日历时间<input type="date">

图片元素：image

图片元素<input type="image" src="../image/1.jpg" alt="1">
       <img src="../image/1.jpg" alt="1">
       <!-- img标签 与image元素 大致相同 -->

按钮：

• 提交按钮 ：submit
• 普通按钮：button
• 重置按钮：reset

<!-- 提交按钮 -->
    <input type="submit" value="提交">
    <!-- 重置按钮 -->
    <input type="reset" value="重置">
      <!-- 普通按钮 -->
    <input type="button" value="按钮">
    <button>按钮2</button>

以上表单标签运用联合CSS美化后 效果如图：

当然了<input>中还有其它的属性值：

name                   定义input元素的名称
value                   规定input元素的值
checked               规定input元素首次加载时的初始化
maxlength             最大长度
minLength             最小长度
size                      输入框得的长度
placeHolder           输入框提示
disabled               禁用
readonly               只读
required               输入框必填
hidden                   隐藏
selected                下拉框中指定默认选中