表单标签 (用于注册界面制作)

前言:

1.为什么需要表单?

  • 使用表单的目的是为了收集用户信息

2.表单的组成

  • 在HTML中一个完整的表单通常由表单域表单元素提示信息三部分组成

目录

一.表单域

二.表单元素(表单控件)

1.input输入表单元素

type常用属性

type属性值效果展示

input 标签除 type 属性外的其他属性

label标签

2.select下拉表单元素

select标签效果展示

 3.textarea文本域

textarea效果展示 


一.表单域

  • 表单域是一个包含表单元素的区域

在HTML中

标签用于定义表单域,以实现用户信息的收集和传递

会把它范围内的表单元素提交得服务器

语法:


                    表单元素

常用属性:

属性 属性值                    解释
action 地址 用于指定接受处理表单数据的地址
method get / post 设置表单数据提交方式
name 文本 给表单域命名

*注: 

  • 提交方式post比get更安全(默认get提交方式)
  • action现阶段用不到在JS中会讲

代码示例:

                                                                                                                                  


二.表单元素(表单控件)

在表单域中可以定义各种表单元素,这些表单元素就是允许用户在表单中输入悬着的内容控件

1.input输入表单元素

  • 在英文单词中input是输入的意思,而在表单元素重标签收集用户信息
  • 标签中,包含一个type属性输入字段拥有很多形式(可以是文本字段,复选框等)

语法:

type常用属性

属性值 解释
button 定义可点击按钮
chekbox 定义多选按钮
file 提供文件上传
hidden 定义隐藏的输入字段
image 定义图片形式的上传按钮
password 定义密码字段
radio 定义单选按钮
reset 定义重置按钮
submit 定义提交按钮
text 定义单行文本输入字段
email 定义邮箱输入
color 定义颜色
data 截取当前日期(年月日)
datetime-local 截取当前年月日时分
time 截取当前时间
url 定义文本框(与text相同)
range 定义进度条(静态)

*注

  • 要使radio定义单选按钮起作用必须给同一组的input标签用name命相同的名字

例如:定义性别单选框

  • text,button,submit等按钮或文本输入框可通过value属性进行更改其中的内容

表单标签 (用于注册界面制作)_第1张图片

                                                                                                        

type属性值效果展示

表单标签 (用于注册界面制作)_第2张图片

input 标签除 type 属性外的其他属性

属性 属性值 解释
name 自定义 定义input元素的名称
value 自定义 规定 input 元素的值 
checked 规定此input中的元素加载时默认选定
maxlength 正整数 规定输入字符段的最大长度
readonly 规定字段只能读不能改
disabled 规定该行框禁用
autofocus

文本输入字段被设置为当页面加载时获得焦点

required 提示该行不能空白提交

*注:没有写属性值的在使用时只需只写属性或属性值等于本身即可

       例如:加载时男默认选中

男
或
  1. name和value时每个表单元素都有的属性值,主要是提交给后台使用
  2. 那么表单元素的名字要求同一组单选按钮或同一组多选按钮要有相同的名字
  3. checked属性主要针对于单选按钮和多选按钮在打开界面时可以默认选中其中的表单元素
  4. maxlength是用户可以在表单元素中输出的最大字数

                                                                                                

label标签

标签用于绑定一个表单元素,当点击label标签内的文本时,浏览器自动将光标转到或选择相应的表单元素上来增强用户体验

语法+实例:点击“男”时单选框选中



2.select下拉表单元素

使用场景:在页面中如果有多个选项让用户选择并且想要节约空间时我们可以使用 ........

    • cols=" "每行字符数  rols=" "显示行数 (实际开发不常用,都是通过css修改)

    textarea效果展示 

    表单标签 (用于注册界面制作)_第4张图片

                                                                                                              


    以上就是本期全部内容 感谢阅览!!!!                         

你可能感兴趣的:(web前端,html)