html常用表单详解

最新推荐文章于 2023-06-21 14:02:33 发布

CV_Ming

最新推荐文章于 2023-06-21 14:02:33 发布

阅读量428

点赞数 1

分类专栏： HTML 文章标签： html html5 经验分享程序人生

本文链接：https://blog.csdn.net/CV_Ming/article/details/113573166

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

表单效果图
我们项目中常用的表单的一些格式，大概整理了这些，大家一起来学习下吧————

表单`<form>`

表单的作用：将数据提交到服务器

form 表单:将数据提交到服务器
	action: 表单提交的路径
	method: 表单提交的方式,默认是get,可以换成post
		get方式:数据通过地址栏提交.不安全,速度快.只能携带4kb数据
		post:安全.且携带数据量比较大

（get提交数据走地址栏，下面是地址栏信息）	
	file:///D:/myweb?username=admin&
				password=123&
				credentialsType=1&
				email=123%401.com&
				birthday=2020-10-07&
				hobby=coding&hobby=basketball&
				file=6+TreeSet%E6%8E%92%E5%BA%8F.png&
				identity=person
		? 前是提交的路径,后是k-v 即输入框的name=输入框的value
		多个k-v之间用&隔开
		
input 输入框.单标签
	placeholder : 背景提示
	name : 输入框的名字,后续javaweb时,java代码通过该name得到输入框的值
	value: 输入框的值
	hidden: 隐藏,将该输入框隐藏.
	type: 必选.默认值是text
		text 普通文本输入框
		password 暗文
		radio 单选框,需要同组内的几个选项的name值一样 checked属性，默认选中该单选框
		email 邮箱
		date  日期
		checkbox 多选框
		file  上传文件
		button 按钮
		reset  重置
		submit 提交
select 下拉框
	<option>选择项1</option> 
	<option selected >默认选择--选择项2</option>

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        form表单标签
            action :数据要提交的服务器的路径
            method :提交的方式，get(默认) | post
                        get通过地址栏提交，数据会在地址栏看见，不安全，提交数据量小
                        post通过内部提交，安全，提交数据量大小不限制（上传文件需要使用post）

    -->
  <form action ="http://www.abc.com" method="get">
      <!--
<input>标签，单标签，代表输入框
默认是文本输入框，即type="text"
value 输入框的默认值
name 用于服务器获取输入框值，使用key
placeholder 背景提示
type = text 默认值，普通文本
        password  暗文输入
        radio     单选框，name属性值需要一致 需要设置 checked属性 默认选中
        valiue属性，用于后端接收选择的值
        checkbox 多选框，name属性值要一致  需要设置valiue属性，用于后端接收选择的值
        email     邮箱，当提交时，如果格式不正确，会提示报错
        file  上传文件
        submit 将输入的数据，提交到form表单指定的路径对应的服务器
        reset 恢复至默认状态


      -->
      <table>
          <tr>
              <td>隐藏框</td>
              <td><input type="hidden" ></td>

          </tr>
      <tr>
          <td> 用户名：</td>
          <td><input type = "text" name = "username" placeholder="提示语"></td>
      </tr>
      <tr>
          <td>密码：</td>
          <td><input type="password" name="password" ></td>
       </tr>
       <tr>
            <td>性别：</td>
            <td><input type="radio"name="sex" value="男">男
                <input type="radio" name="sex" value="女">女</td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td><input type = "checkbox" name ="hobby" value="eat">吃饭
                <input type = "checkbox" name ="hobby" value="eat2">吃饭2
                <input type = "checkbox" name ="hobby" value="eat3">吃饭3<br></td>
        </tr>
        <tr>
            <td> 邮箱：</td>
            <td><input type="email" name="email"></td>
        </tr>
        <tr>
            <td>头像（上传文件）：</td>
            <td><input type="file" name="file"></td>
        </tr>
        <tr>
            <td>出生年月日：</td>
            <td><input type="date" name="birthday"></td>
        </tr>
        <tr>
            <td>身份类型</td>
            <td>
                <select>
                    <option value="1">学生</option>
                    <option value="2">军人</option>
                    <option value="3">成人</option>
                </select>
        </td>
        </tr>
        <tr>
            <td> <input type="submit" value="提交"></td>
            <td><input type="reset"  value="重置"></td>
        </tr>
    </table>
           
  </form>  
</body>
</html>

表单效果图
结束！！

CV_Ming

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html常用表单详解

我们项目中常用的表单的一些格式，大概整理了这些，大家一起来学习下吧————表单<form>表单的作用：将数据提交到服务器form 表单:将数据提交到服务器 action: 表单提交的路径 method: 表单提交的方式,默认是get,可以换成post get方式:数据通过地址栏提交.不安全,速度快.只能携带4kb数据 post:安全.且携带数据量比较大（get提交数据走地址栏，下面是地址栏信息） file:///D:/myweb?username=admin&am.
复制链接

扫一扫