最简单易懂的HTML表单讲解文章

一、表单域

表单域是一个包含表单元素的区域，在HTML标签中，<from>标签用于定义表单域，以实现用户信息的收集和传递。

<form>会把它范围内的表单元素信息提交给服务器

语法格式：

<form action=”url地址” method=“提交方式”name=“表单域名称”> 各种表单元素控件 </form>

常用属性：

属性	属性值	作用
Action	URL地址	用于指定接收并处理表单数据的服务器程序的URL地址
method	get/post	用于设置表单数据的提交方式，
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

二、表单控件（表单元素）  

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件

1、<input>表单元素

<input type=”属性值”>

常用属性值

 单选按钮和复选框（重要）

   <form action="">
        性别：<input type="radio" name="xb">男 <input type="radio"name="xb">女<br>
        爱好：<input type="checkbox" name="ah" >游戏 <input type="checkbox" name="ah" >
         看电视<input type="checkbox" name="ah" >吃饭
    </form>

其它属性

checked属性一般搭配单选和复选框使用，给哪个input标签设置这个属性，这个按钮则默认处于选中状态。

 2、label标签

<label>标签为input元素定义标注〔标签)。
<label>标签用于绑定一个表单元素当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转癸或者选择对应的表单元素上,用来增加用广体验.
核心: <label>标签的for属性应当与相关元素的id属性相同。

​
 性别：<input type="radio" name="xb" id="xb"><label for="xb">男</label>
         <input type="radio"name="xb"id="sex"><label for="sex">女</label>
       

点击文字，也会选中按钮

三、下拉菜单 select

使用场景;在页面中，如果有多个选项让用户选择，并且想要节约页面空问时，我们可以使用<select>标签控件定义下拉列表。
 

​
 老家：
        <select name="" id="">
            <option value="">云南</option>
            <option value="">北京</option>
            <option value="">上海</option>
        </select>

​

四、textarea标签

使用场景;当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用<textarea>标签。在表单元素中，<textarea>标签是用于定义多行文本输入的控件。