HTML表单基础知识

2023-09-30 20:08:04

这次我们主要介绍关于表单的基础知识，下次制作一个登陆页面。

首先，表单由三个部分组成：表单域、表单控件（表单元素）、提示信息。如图：

表单域

表单域是一个包含表单元素的区域，相当于提供一个空间，用到的标签是 < form > 标签。

< form > 用于定义表单域，以实现用户信息的收集和传递，会把它范围内的表单元素信息提交给服务器。（关于服务器的相关知识以后再了解）

语法：

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

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

表单控件（表单元素）

表单元素分为三种：input 输入表单元素、select 下拉表单元素、textarea 文本域元素。

input 输入表单元素

语法（案例）：

<form action="#" method="GET">
        用户名:<input type="text" name="username" value="请输入用户名" maxlength="8">
        性别:男<input type="radio" name="sex" value="男">
            女<input type="radio" name="sex" value="男">
        爱好：吃饭<input type="checkbox" name="hobby" value="吃饭">
             睡觉<input type="checkbox" name="hobby" value="睡觉">
    </form>

效果如下：

input 的属性：

属性	作用
type	类别
name	定义 input 元素的名称
value	规定 input 的值
maxlength	规定输入字段中字符的最大长度
checked	规定 input元素一打开就被选中

type 的属性：

属性	作用
text	输入单行文本，默认宽度为20个字符
password	密码字段，该字符会被掩码
radio	单选按钮
checkbox	复选框
submit	提交按钮
button	可点击按钮
file	输入字段和“浏览”按钮，可用来上传文件
reset	重置按钮，清除所有已填内容，重新填写
image	定义图像形式的提交按钮
hidden	定义隐藏的输入字段

注释：所有的单选按钮要有相同的 name 值，复选按钮也是一样。

因为，单选按钮如果不设置名称，或者设置的名称不一样的话，就意味着这是几个独立的单选框，那么这几个单选框就可以分别被选中，那就看起来和复选框没什么区别。但是加上相同的 name 值后，就意味着这几个单选框是一家人，他们有一样的名字，也就形成了多选一。

<label>标签

语法：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex">

作用：用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将光标转到或者选择对应的表单元素上。

比如这幅图，一般只有点击小圆圈才能实现选择，而现在，只需要点击 “三图” 的文字就可以实现选择。

select 下拉表单元素

语法：

<select>
   <option>选项一</option>
   <option>选项二</option>
   <option>选项三</option>
</select>

效果如下：

注释：select 中的<option> 选项最少有一个；

option 中 selected="selected" 时，当前选项即为默认选中项。

textarea 文本域元素

语法：

<textarea></textarea>

作用：用于输入内容较多，多行输入来使用。

效果如下：

这次就到这里，如有任何问题或是建议，欢迎留言私信，祝大家学习进步！

码农公寓

表单域

表单控件（表单元素）

input 输入表单元素

select 下拉表单元素

textarea 文本域元素

相关文章