Html中Form表单的总结

不会敲代码的洋

已于 2023-05-13 13:23:38 修改

阅读量375

点赞数 1

分类专栏：前端文章标签： html 前端

于 2023-05-11 20:39:37 首次发布

本文链接：https://blog.csdn.net/qq_74397635/article/details/130548232

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML 表单用于搜集不同类型的用户输入。

Form表单的相关属性

1.Action 属性

action 属性定义在提交表单时执行的动作，向服务器提交表单的通常做法是使用提交按钮。定义为所要跳转的路径。

2.Method 属性

method 属性规定在提交表单时所用的 HTTP 方法(get 或 post)，发送的方式但是它的初始值为get。总而言之get请求会将用户信息暴露在地址栏上，而post相较于get较为安全。

3.Name 属性

一个页面上的表单可能不止一个，为了区分这些表单，就需要name 属性给表单命名，通常与id属性值相同。需要注意的是表单名称中不能包含特殊字符和空格。

4.其他属性

其他属性在HTML并不常用，由HTML表单简单总结。

路径

绝对路径，从根目录为起点到某一个目录的路径；
相对路径，从一个目录为起点到另外一个的目录的路径。

例如：
             ┍ A文件夹
          C -|
             ┕ B文件夹

绝对路径： C:\A文件夹

相对路径（如果你在A文件夹时）： ..\B文件夹（‘..\’向上一级意思）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TITLE</title>
</head>       
<body>
    <form action="第一天\demo.html" name="regester" method="post">
        用户名：<input type="text"  name="username" readonly  required aria-selected="zhangsan">
        <br>
        密  码：<input type="password"  name="password"  required>
        <input type="submit">
        <br>  
    </form>  
</body>
</html>

"第一天\demo.html"则是相对路径。

Form表单的元素

表单元素（文本框、密码框、下拉列表框等），多由input、textarer、select标签构成，需要放入form标签内使用。表单标签：指<form></form>本身。

1.input标签

input标签是用于搜集用户的信息，根据不同的属性值，输入字段有多种形式。

语法格式：

<input type="元素的不同类型" value="元素的值" name="元素的名称">

type的取值:

text ------------文本框
password ---密码框
radio ----------单选按钮
checkbox ----多选按钮
submit --------提交按钮
reset -----------复位按钮
button ---------普通按钮
image ----------图像按钮
file --------------文本域(上传文件的按钮) hidden ---------隐藏域
email -----------邮箱
color -----------颜色域
date ------------日期
time ------------时间
range ----------进度条

input 的属性:
checked -----默认选择
readonly -----只读字段只可以读不能修改 disabled -----表示禁用不可以点击

<!DOCTYPE html>   
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <form action="demo.html" name="regester" method="post">
    用户名：<input type="text"  name="username" readonly  value="zhangsan">
    <br>
    密  码：<input type="password"  name="password"  autofocus required>
    <br>    
    <input type="submit"><br>

    请选择你的性别：
<input type="radio" vale="男" name="gender" checked> 男
<input type="radio" vale="女" name="gender" checked> 女<br>
    请选择你的角色：
<input type="radio" vale="偶像练习生" name="gender" checked> 偶像练习生
<input type="radio" vale="全民制作人" name="gender" checked> 全民制作人<br>
<p>
    请选择你的武器:
    <input type="checkbox"  name="aihao" > 背带裤
    <input type="checkbox"  name="aihao" > 篮球
    <input type="checkbox"  name="aihao" > 话筒
    <br>
</p>
<p>
    请选择你的爱好:
    <input type="checkbox"  name="aihao" > 唱
    <input type="checkbox"  name="aihao" > 跳
    <input type="checkbox"  name="aihao" > 篮球
    <input type="checkbox"  name="aihao" > rap
    <br>
</p>
<input type="submit">
<input type="reset">
<input type="file">
<input type="hidden" value="12131"><br>
    请填写你的邮箱:<input type="email" name="email" value="请填写你的邮箱">
<input type="color"><br>
<input type="date"><br>
<input type="time"><br>
<input type="datetime-local">
<input type="range"><br>
</body>
</html>

2.select标签

下拉类表框，一般与option标签进行连用。

selected属性---默认被选中的选项。

multiple=“multiple”属性-----以列表形式显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TITLE</title>
</head>       
<body>
   <form action="">
             请选择你的收获地址
      <select name="" id="" multiple="multiple" value="">
        <option value="">忠县</option>
        <option value="" >永川</option>
        <option value="" >万州</option>
        <option value="" selected>江北</option>
        </select> 
    </form>
</body>
</html>

3.textarea标签

在HTML中用来实现文本域的操作，表示一个多行纯文本编译器，cols=“”表示了多少列，用来表示文本域的宽度，rows=“”则表示多少行，用来表示文本域的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TITLE</title>
</head>   
<form action="">
  <textarea name="" id="" rows="55" cols="60">
           为天地立心，为生民立命
  </textarea>
</form>
</body>
</html>

不会敲代码的洋

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
Html中Form表单的总结

一个页面上的表单可能不止一个，为了区分这些表单，就需要name 属性给表单命名，通常与id属性值相同。action 属性定义在提交表单时执行的动作，向服务器提交表单的通常做法是使用提交按钮。发送的方式但是它的初始值为get。相对路径（如果你在A文件夹时）： ..\B文件夹（‘..\’向上一级意思）input标签是用于搜集用户的信息，根据不同的属性值，输入字段有多种形式。路径，从一个目录为起点到另外一个的目录的路径。表示了多少列，用来表示文本域的宽度，则表示多少行，用来表示文本域的高度。
复制链接

扫一扫