HTML必备表单标签详解(二)

原创
2020/06/21 22:20
阅读数 169

​​​​​​一. HTML表单标签

相当于程序:main方法

<form>

<input>

<select>

<textarea>

 

表单相当于WEB程序的入口,作用:用来提交数据

 

 

1.标签:<form>

 

 

2.表单-案例

密码框:非明文。

<input />信息输入框

type:框体类型

text 文本框:正常输入。  

password 密码框:非明文

submit 提交按钮:把表单中所有信息输入框的数据提交给网站(服务器)

 

value:值

给按钮设置按钮名称

 

 

 

建议:除了单选框和复选框以外,其他框体的name属性不能一致

 

 

3. 案例2

通过案例,快速学习表单知识

 

reset 重置按钮:把表单输入项恢复到默认状态。

 

代码实现:

<!--
    所有的表单输入项,必须放在<form>:<input/>  <select>  <textarea>
    用来输入信息。
    所有的表单输入项,如果需要提交数据,必须需要name属性

    input 中:
        value属性:
             ①按钮名称
             ②赋予默认参数值
        checked属性:
            标记单选框/复选框 是否选中
            checked="checked"
-->
<form>
    用户名:<input type="text" name="username" value="zzzzz"/><br/>
    密码:<input type="password" name="pwd"/><br/>

    性别:<input type="radio" name="sex" value="man" checked="checked"/>男
    <input type="radio" name="sex" value="woman"/>女<br/>
    爱好:<input type="checkbox" name="hobby" value="run" checked="checked"/>跑步
    <input type="checkbox" name="hobby" value="travel"/>旅游
    <input type="checkbox" name="hobby" value="code" checked="checked"/>编码
    <br/>
    照片:<input type="file" name="photo" /><br/>
    籍贯:<select name="city">
                <option value="">请选择籍贯</option>
                <option value="bj">北京</option>
                <option value="js">江苏</option>
                <option value="hlj">黑龙江</option>
                <option value="hn">河南</option>
            </select>  <br/>
    简介:<textarea name="info">xxxxxxxxx</textarea>  <br/>
    <input type="submit" value="注册"/>
    <input type="reset" value="重置"/>
</form>

 

总结:

1、<input><select><textarea>统称为表单输入项,用来输入表单信息

2表单输入项若需要提交数据,必须得有name属性(按钮除外)

3、参数列表上:

name属性就是参数名   变量名

value属性就是参数值   变量值

 

<input type=”text” name=”username” value=”zzz”/>

String username = “zzz”;

4所有的按钮必须给value,设置按钮名称

所有的单选框和复选框必须有value属性

其他根据题意、需求看情况设置value

 

 

4.​​​​​​​ 表单输入项标签-<input>

属性

取值

描述

type

text

文本框,单行的输入字段,用户可在其中输入纯文本。(默认)

password

密码框。  内容为非明文

radio

 

单选框。   在同一组内有单选效果

  1. 必须设置name属性 分组,name属性相同;
  2. 必须设置value属性 为组件赋予默认参数值;

 

checkbox

复选框。  在同一组内有复选/多选效果

  1. 必须设置name属性 分组,name属性相同;
  2. 必须设置value属性 为组件赋予初始值;

 

submit

提交按钮。用于控制表单提交数据。

该组件上不建议写name属性

reset

 

重置按钮。 用于将所有的 表单输入项恢复到 默认状态

该组件上不建议写name属性

file

 

附件框。用于文件上传。(后续文件上传会详细讲解)

hidden

 

隐藏域。一般用作提交服务器需要拿到,但用户不需要看到的数据。

该组件必须有name和value

button

 

普通按钮。需要和JavaScript事件一起用(后续JavaScript会详细讲解)

 

 

5.​​​​​​​ 选择框标签-<select>

  • <select> 定义一个下拉列表。可以进行单选或多选。
  • <option>定义一个下拉列表的列表项。

 

 

select属性:

属性名

属性说明

name

组件名。(必设置)

如果需要下拉选择框数据提交到服务器,必须提供name属性

 

multiple

设置该标签选项全部显示,并且可以进行多选提交。默认为单选。

 

不设置该属性为单选

 

设置该属性 multiple= "multiple"为多选

 

 

option属性:

属性名

属性说明

value

设置需要提交的参数值。(必设置)

 

selected

设置某个列表项默认选中。

若列表中没有列表项有该属性默认第一个列表项被选中

 

 

 

选择框必须有的属性:

<select>必须name属性

<option>建议必须有value属性,属性值建议不是中文。

选择框默认选中:<option selected=”selected”></option>

单选框/复选框默认选中:<input type=”radio” checked=”checked”/>

 

 

6.​​​​​​​ 文本域标签-<textarea>

  • <textarea></textarea>标签

文本域标签,可支持用户输入并提交大量纯文字数据。

 

textarea属性:(没有value属性)

属性名

属性说明

name

组件名。(必设置)

如果需要下拉选择框数据提交到服务器,必须提供name属性

 

 

 

文本域和文本框区别

  • 文本框不能换行,文本域可以
  • 文本框参数值是value属性,文本域参数值是标签的内容体

 

 

7.​​​​​​​ 表单标签<form>

所有的表单输入项,必须放在<form>标签之中,必须有name属性

属性名

属性说明

action

请求路径,确定表单提交到服务器的地址(路径)【必设置】

【将表单数据提交到何处】

默认把数据提交当前页面

 

一般会将数据提交到服务器的程序上。(javaweb核心会详细讲解)

 

method

请求方式。常用的取值:GET、POST

【将数据以何种方式提交】

默认为:GET

 

get提交方式特点把数据拼接到地址栏上

post提交方式特点:没有把提交数据拼接到地址栏上。请求体

 

 

 

 

 

 

 

 

今日总结:

Html表单:

         <form>----表单标签(本体)

表单输入项:用来输入信息

<input>

  <select>

<textarea>

 

  1. 所有的表单输入项必须被<form>标签包裹
  2. <form>标签单独使用没有效果

 

<input>

<select>

<textarea>

 

 

 

 

看完恭喜你,又知道了一点点!!!

你知道的越多,不知道的越多! 

~感谢志同道合的你阅读,  你的支持是我学习的最大动力 ! 加油 ,陌生人一起努力,共勉!!

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
0 收藏
1
分享
返回顶部
顶部