【HTML】HTML 表单 ① ( input 表单控件 | input 标签语法 | input 标签属性 | type 属性 | value 属性 | name 属性

文章目录

一、HTML 表单
二、input 表单控件

1、input 标签语法
2、input 标签属性
3、type 属性
5、value 属性
6、name 属性
7、checked 属性

一、HTML 表单

HTML 表单主要用于与用户交互 , 收集信息 ;

表单组成 :

表单控件 : 文本输入框 , 复选框 , 按钮 ;
提示信息 : 用于提示用户如何进行操作 ;
表单域 : 表单的容器 , 上述表单控件和提示信息就被封装在表单域中 , 在表单域中可以定义处理表单数据的地址和提交数据到服务器的函数 ;

以 163 邮箱注册页面为例 , 说明表单控件 , 表单信息 , 表单域如下图所示 :

二、input 表单控件

1、input 标签语法

input 表单控件标签语法示例 :

<input type="text" value="Hello" />

input 表单控件标签是单标签 ;

2、input 标签属性

input 标签的属性 :

type : input 标签的 type 属性 , 用于设置控件类型
name : 控件名称
value : 控件默认文本内容
size : 控件的宽度
checked : 控件的默认状态是否被选中
maxlength : 控件可输入的最大字符数, 取值必须是正整数 ;

3、type 属性

input 标签的 type 属性值 : input 标签的 type 属性 , 用于设置控件类型

text : 文本输入框 ;
password : 密码输入框 ;
radio : 单选按钮 ;
checkbox : 复选框 ;
button : 按钮 ;
submit : 提交按钮 ;
reset : 重置按钮 ;
image : 图像按钮 ;
file : 文件域 , 选择或保存文件 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
    <head>    
        <meta charset="UTF-8" /> 
        <title>网页标题</title>
        <base target="_blank"/>
    </head>
    <body>
        <!-- 表单 -->
        用户名 : <input type="text" />
        密  码 : <input type="password" />
    </body>
</html>

显示效果 :

5、value 属性

value 值是表单的默认值 , 一般用作提示信息 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
    <head>    
        <meta charset="UTF-8" /> 
        <title>网页标题</title>
        <base target="_blank"/>
    </head>
    <body>
        <!-- 表单 -->
        用户名 : <input type="text" value="请输入账号"/>
        密  码 : <input type="password" value="请输入密码"/>
    </body>
</html>

执行效果 :

6、name 属性

在一个 HTML 网页中可能存在很多表单 , name 属性是用于标识表单的 ;

后端可以通过表单 name 属性 , 找到表单 ;

name 属性值是用户自定义的字符串 ;

在单选按钮选项中 , name 属性可以将多个 radio 表单控件组合在一起 , 作为单选选项 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
    <head>    
        <meta charset="UTF-8" /> 
        <title>网页标题</title>
        <base target="_blank"/>
    </head>
    <body>
        <!-- 表单 -->
        用户名 : <input type="text" value="请输入账号"/>
        密  码 : <input type="password"/>
        <br />
        男 <input type="radio" name="sex"/> 女 <input type="radio" name="sex"/>
    </body>
</html>

展示效果 :

7、checked 属性

checked 属性用于设置单选框和复选框的默认选项属性 ;

代码示例 : 在下面的代码中 , 为 radio 设置一个默认选中的属性 ;

<!DOCTYPE html> 
<html lang="en">
    <head>    
        <meta charset="UTF-8" /> 
        <title>网页标题</title>
        <base target="_blank"/>
    </head>
    <body>
        <!-- 表单 -->
        用户名 : <input type="text" value="请输入账号"/>
        密  码 : <input type="password"/>
        <br />
        男 <input type="radio" name="sex"/> 
        女 <input type="radio" name="sex" checked="true"/>
    </body>
</html>

展示效果 : 第二个单选选项默认选中 ;