html基础之form表单 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--
定义form表单：form表单回采集包含的有效数据，提交到后台，进行交互

http://localhost:63342/html/shangguigu/01day/aaa?username=aaa&pwd=bbbb

?之前是提交的资源的目标地址

http：信息交互遵照http协议
localhost：代表本地的ip地址
63342：idea分配的端口
/html/shangguigu/01day/aaa：项目的名称和路径

？之后是提交的具体的数据
username=aaa&pwd=bbbb：必须使用name属性，才能以key=value的形式
多个键值对之间使用&进行连接
 PS:只有form表单中的内容才会被收集

method属性：
get：提交的数据可见，不安全，提交数据长度有限制，效率高
post：提交的数据不可见，安全，提交的数据长度没有限制，效率低

默认使用的get属性
-->
<form action="aaa" method="get">
  用户名：<input type="text" name="username"/> <br/>
  密码：<input type="password" name="pwd"/> <br/>
  <input type="submit">
</form>

</body>
</html>

html中的表单元素

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单元素</title>
</head>
<body>
<form action="" method="">
<!-- 表单元素
文本框：
input：使用广泛，通过type属性的不同值，老表现不同的形态。
type="text" 文本框，里面文字可见
表单元素必须有一个属性：name，有了name才可以提交数据，才可以采集数据。
然后提交的时候会以键值对的形式拼接在一起。

value：就是文本框中的具体值
键值对：name=value的形式
如果value提前写好，那么默认效果就是value中内容
一般默认提示语：有placeholder属性，不会用value---》value只是文本框中的值。

readonly:只读，不能修改，可以正常进行提交
disabled禁用：完全不用，不能正常提交

readonly="readonly"
readonly
readonly="true"


-->
<input type="text" name="username" placeholder="请输入身份证信息"/>
<input type="text" name="username2" value="123123" readonly="readonly"/>
<input type="text" name="username3" value="123123" disabled="disabled"/>

<!--  密码框-->

  <input type="password" name="pwd">

<!--  单选按钮
一组单选按钮，必须通过name来进行控制，让他们在一个分组中，
然后在一个分组里只能选择一个
正常情况下，提交数据为：sex=on,后台不能进行区分提交的数据
不同的选项的value值要控制为不同，这样后台就可以进行区分了。

-->
  <input type="radio" name="sex" value="1"> 男
  <input type="radio" name="sex" value="0"> 女

<!--
多选框：
默认value=all
需要通过name属性来控制，让他们在一个分组中，然后在一个分组可以选择多个
不同的选项的value值要控制为不同，这样后台接收到的数据就可以进行区分了。
多个选项提交的时候，键值对用&符号进行拼接，如：
favlan=1&favlan=3

-->
  <input type="checkbox" name="favlan" value="1"/> java
  <input type="checkbox" name="favlan" value="2"/> php
  <input type="checkbox" name="favlan" value="3"/> python
  <input type="checkbox" name="favlan" value="4"/> c#

<!--  文件 -->
  <input type="file">
<!--  隐藏域-->
  <input type="hidden" name="username6" value="6">

<!--  普通按钮-->
  <input type="button" value="普通按钮">

<!--  重置按钮，将页面所有数据回复到初始状态 -->
  <input type="reset">

  <input type="image">

<!--  下拉框 -->
  选择你喜欢的城市：
  <select name="city" multiple>
    <option value="1">北京</option>
    <option value="2" selected>天津</option>
    <option value="3">重庆</option>
    <option value="4">上海</option>
  </select>

<!--  文本域
 利用css样式控制大小不可变
-->
  <textarea style="resize: none" rows="10" cols="30"></textarea>

<!-- label标签
 一般会在想要获取焦点的标签上添加id属性，然后使用label中的for属性跟id配合使用
 -->
  <label for="uname"><input type="text" name="username" id="uname"/></label>

<!--  提交按钮，具有提交功能-->
  <input type="submit"/>



</form>

</body>
</html>

html5新增属性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<form action="" method="">
<!--新增的type类型-->
<!--  邮箱-->
  <input type="email" name="email">
<!--  -->
  <input type="url">
  <input type="color">

  <input type="number" max="99" min="1" step="3" value="7">

  <input type="range" min="1" max="10" name="range" step="3">10

  <input type="date">

  <input  type="month">

  <input type="week">
  
<!--  html新增的属性 
multiple:多选
placehoder：默认提示
autofocus：自动获取焦点
required：被需要的


-->

</form>

</body>
</html>
posted @ 2023-02-27 15:57  King-DA  阅读(27)  评论(0)    收藏  举报