html表单用法简介

<form> 元素

HTML 表单用于收集用户输入。
<form action="233" method="post"> .... </form>
action
当前表单的提交地址
method
发送数据的http方法,有get和post两种
target
在何处打开 action URL
post 和 get 方式的区别

  • 表象不同,get把提交的数据url可以看到,post看不到
  • 原理不同,get 是拼接 url, post 是放入http 请求体中
  • 提交数据量不同,get最多提交1k数据,浏览器的限制。post理论上无限制,受服务器限制
  • get提交的数据在浏览器历史记录中,安全性不好
    场景不同,get 重在 "要", post 重在"给"

<input> 元素

<input> 元素是最重要的表单元素。
<input> 元素有很多形态,根据不同的 type 属性。
text
定义单行输入文本框

<input id="username" type="text" name="username" value="龙傲天">

例.png

password
定义密码字段

<input id="password" type="password" name="password" placeholder="输入密码">

例.png

radio
定义单选按钮,用name分组,用value分项

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

例.png

checkbox
定义多选按钮

<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="novel">小说
<input type="checkbox" name="hobby" value="study">学习

例.png

button,submit,reset
button定义按钮
submit定义提交表单数据至表单处理程序的按钮
reset定义重置按钮

<input type="button" value="按钮" /> 不会提交
<input type="submit" value="提交" /> 会提交
<input type="reset" value="重置" /> 重置输入
例.png

<textarea>元素
多行文本框

<textarea name="comment" cols="30" rows="10">
        红红火火恍恍惚惚
##</textarea>
例.png

<option>元素

下拉菜单

      <select name="car">
        <option value="大黄蜂">大黄蜂</option>
        <option value="擎天柱" selected>擎天柱</option>
        <option value="威震天">威震天</option>
      </select> 

例.png

selected
默认选项

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容