设为首页 加入收藏

TOP

day 44 前端HTML(四)
2019-05-23 22:14:21 】 浏览:125
Tags:day 前端 HTML

      所以记住form表单里面有两个属性:action控制往哪里提交数据、method控制用什么方式提交。

      还有一个文件input:因为我们刚才说,数据是通过组成一个字典发给后端的,但是文件怎么做键值对啊,做不了,所以需要通过二进制流的形式一点一点的传送给后端,就是这个multipart搞的事情,有个了解就行了,别纠结,到了django我们在细说。

       

    注意:

      form表单提交数据的时候,必须有个submit按钮

  下面这个django的示例,等我学django的时候再说吧:

  Django接收上传文件代码

 

  input(都试一下)

    <input> 元素会根据不同的 type 属性,变化为多种形态。

type属性值 表现形式 对应代码
text 单行输入文本 <input type=text" />
password 密码输入框(不显示明文) <input type="password"  />
date 日期输入框 <input type="date" />
checkbox 复选框 <input type="checkbox" checked="checked" name='x' />
radio 单选框 <input type="radio" name='x' />
submit 提交按钮 <input type="submit" value="提交" /> #发送浏览器上输入标签中的内容,配合form表单使用,页面会刷新
reset 重置按钮 <input type="reset" value="重置"  />  #页面不会刷新,将所有输入的内容清空
button 普通按钮 <input type="button" value="普通按钮"  />
hidden 隐藏输入框 <input type="hidden"  />
file 文本选择框 <input type="file"  /> (等学了form表单之后再学这个)

   属性说明:

  • name:表单提交时的“键”,注意和id的区别
  • value:表单提交时对应项的值
    • type="button", "reset", "submit"时,为按钮上显示的文本年内容
    • type="text","password","hidden"时,为输入框的初始值
    • type="checkbox", "radio", "file",为输入相关联的值
  • checked:radio和checkbox默认被选中的项
  • readonly:text和password设置只读
  • disabled:所有input均适用

      

 

  select标签

复制代码
复制代码
<form action="" method="post">
  <select name="city" id="city">
    <option value="1">北京</option>
    <option selected="selected" value="2">上海</option> #默认选中,当属性和值相同时,可以简写一个selected就行了
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
</form>
复制代码
复制代码

  属性说明:

  • multiple:布尔属性,设置后为多选下拉框,否则默认单选
  • disabled:禁用
  • selected:默认选中该项
  • value:定义提交时的选项值

  

  label标签

    定义:<label> 标签为 input 元素定义标注(标记)。如果不用这个label给input标签一个标记,input会变黄,不影响使用,只是提示你,别忘了给用户一些提示,也就是这个label标签。
    说明:

    1.   label 元素不会向用户呈现任何特殊效果。但是点击label标签里面的文本,那么和他关联的input标签就获得了光标,让你输入内容
    2.   <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action="">
  <label for="username">用户名</label>  #for和input的id属性一样,就关联在一起了
  <input type="text" id="username" name="username">
</form>

  

    

 

  textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>

  属性说明:

  • name:名称
  • rows:行数  #相当于文本框高度设置
  • cols:列数   #相当于文本框长度设置
  • disabled:禁用

 

 
 
首页 上一页 1 2 3 4 下一页 尾页 4/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇社区发现 下一篇IP代理池之验证是否有效

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目