HTML 表单

最新推荐文章于 2023-01-15 21:17:15 发布

cs08211317dn

最新推荐文章于 2023-01-15 21:17:15 发布

阅读量805

点赞数

分类专栏： java web 文章标签： html Html HTML 下拉框单选框复选框文本输入框

本文链接：https://blog.csdn.net/sunny_forever/article/details/8301259

版权

java web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.单行文本输入框

<html>
  <head>
  <title> 单行文本输入框 </title>
  </head>
  <body>
  <form action="###" method="get">
  输入你的姓名：
  <input type="text" name="yourname">
  <input type="submit" value="提交">
  </form>
  </body>
</html>

2.密码输入框

<html>
  <head>
  <title> 密码输入框 </title>
  </head>
  <body>
  <form action="###" method="post"> 
  输入你的姓名： 
  <input type="text" name="yourname"><br>
  输入你的密码：
  <input type="password" name="yourpw"><br>
  <input type="submit" value="提交">
  </form>
  </body>
</html>

3.复选框（checkbox）

<html>
  <head>
  <title> 复选框 </title>
  </head>
  <body>
  <form action="###" method="post"> 选择你喜欢的水果： <br>
  <input type="checkbox" name="fruit" value="apple"> 苹果 <br>
  <input type="checkbox" name="fruit" value="banana"> 香蕉 <br>
  <input type="checkbox" name="fruit" value="orange"> 橘子 <br>
  <input type="submit" value="提交">
  </form>
  </body>
</html>

4.复选框-缺省已选

<html>
  <head>
  <title> 复选框-缺省已选 </title>
  </head>
  <body>
  <form action="###" method="post"> 选择你喜欢的水果： <br>
  <input type="checkbox" name="fruit" value="apple" checked> 苹果 <br>
  <input type="checkbox" name="fruit" value="banana"> 香蕉 <br>
  <input type="checkbox" name="fruit" value="orange"> 橘子 <br>
  <input type="submit" value="提交">
  </form>
  </body>
</html>

5.单选框

<html>
  <head>
  <title> 单选框 </title>
  </head>
  <body>
  <form action="###" method="post"> 选择你喜欢的水果： <br>
  <input type="radio" name="fruit" value="apple" > 苹果 <br>
  <input type="radio" name="fruit" value="banana"> 香蕉 <br>
  <input type="radio" name="fruit" value="orange"> 橘子 <br>
  <input type="submit" value="提交">
  </form>
  </body>
</html>

6.单选框-缺省已选

<html>
  <head>
  <title> 单选框-缺省已选 </title>
  </head>
  <body>
  <form action="###" method="post"> 选择你喜欢的水果： <br>
  <input type="radio" name="fruit" value="apple" checked> 苹果 <br>
  <input type="radio" name="fruit" value="banana"> 香蕉 <br>
  <input type="radio" name="fruit" value="orange"> 橘子 <br>
  <input type="submit" value="提交">
  </form>
  </body>
</html>

7.下拉框（select）单选

<html>
  <head>
  <title> 下拉框-单选 </title>
  </head>
  <body>
  <form action="###" method="post"> 选择你喜欢的水果： <br>
  <select name="fruit">
  <option value="apple">苹果
  <option value="banana">香蕉
  <option value="orange">橘子
  </option>
  </select>
  <input type="submit" value="提交">
  </form>
  </body>
</html>

8.下拉框-多选

<html>
  <head>
  <title> 下拉框-多选 </title>
  </head>
  <body>
  <form action="###" method="post"> 选择你喜欢的水果： <br>
  <select name="fruit"  multiple>
  <option value="apple">苹果
  <option value="banana">香蕉
  <option value="orange">橘子
  </option>
  </select>
  <input type="submit" value="提交">
  </form>
  </body>
</html>

9.多行输入框（textarea）

<html>
  <head>
  <title> 多行输入框 </title>
  </head>
  <body>
  <form action="###" method="get"> 简单介绍自己： <br>
  <textarea rows="3" cols="50">
  </textarea>
  <br>
  <input type="submit" value="提交">
  </form>
  </body>
</html>

10.图片提交

<html>
  <head>
  <title> 图片提交</title>
  </head>
  <body>
  <form action="###" method="get"> 按钮图片： <br>
  <input type="image" src="http://www.blabla.cn/images/icons/go.gif" alt="提交" name="imagesubmit">
  </form>
  </body>
</html>