HTML 文本框输入框列表文本框和文本域等等

最新推荐文章于 2023-07-05 12:27:49 发布

wwaitings

最新推荐文章于 2023-07-05 12:27:49 发布

阅读量1.1w

点赞数 8

分类专栏： HTML

本文链接：https://blog.csdn.net/m0_48219937/article/details/119460722

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

初识表单和get提交

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<!--表单form
action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post,get 提交方式
        get方式:我们可以在url中看到我们提交的信息，不安全，高效
        post方式:比较安全，传输大文件
-->

<h1>注册</h1>

<form action="1.我的第一个网页.html" method="post">
<!--  文本框输入：<input type="text"-->
  <p>名字：<input type="text" name="username"></p>
<!--  密码框：<input type="password"-->
  <p>密码：<input type="password" name="pwd"></p>
  <p>
    <input type="submit">
    <input type="reset">
  </p>

</form>



</body>
</html>

文本框和输入框

在这里插入图片描述

列表文本框和文本域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>

<!--表单form
action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post,get 提交方式
        get方式:我们可以在url中看到我们提交的信息，不安全，高效
        post方式:比较安全，传输大文件
-->

<h1>注册</h1>

<form action="1.我的第一个网页.html" method="post">
<!--  文本框输入：<input type="text"-->
  <p>名字：<input type="text" name="username"></p>
<!--  密码框：<input type="password"-->
  <p>密码：<input type="password" name="pwd"></p>
  
  <p>
    <input type="submit">
    <input type="reset">
  </p>

<!--  下拉框， 列表框-->
  <p>国家：
    <select name="列表名称">
      <option value="china">中国</option>
      <option value="us">美国</option>
      <option value="eth">瑞士</option>
      <!--默认选择-->
      <option value="etl">瑞士</option>
      <option value="etl">意大利</option>
    </select>
  </p>
<!--  文本域-->
  <p>
    <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
  </p>
<!--  文件域-->
  <p>
    <input type="file" name="file">
    <input type="button" value="上传" name="upload">
  </p>

  <p>
    <input type="submit">
    <input type="reset" value="清空表单">
  </p>

</form>



</body>
</html>

效果图：
在这里插入图片描述

搜索框滑块和简单验证

在这里插入图片描述

表单的应用

在这里插入图片描述

表单初级验证

提示信息用在输入框中
在这里插入图片描述

wwaitings

关注

8
点赞
踩
45

收藏

觉得还不错? 一键收藏
0
评论
HTML 文本框输入框列表文本框和文本域等等

初识表单和get提交<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>登录注册</title></head><body><!--表单formaction: 表单提交的位置，可以是网站，也可以是一个请求处理地址method: post,get 提交方式 get方式:我们可以
复制链接

扫一扫