HTML表单用法

一、表单

##1.表单的作用
  HTML 表单用于接收不同类型的用户输入,用户提交表单时向服务器传输数据,从而实现用户与Web服务器的交互。

二、简单使用

首先需要form包裹整个需要提交的input数据

<form action="/login.html" method="post">
        <div class="usernmae">
            <label for="usernmae">用户名:</label>
            <input id="username" type="text" name="username">
        </div>
        <div class="password">
            <label for="password">密码:</label>
            <input type="text" id="password" name="password">
        </div>
        <div class="submit">
          <button type="button">提交</button>
          <input type="reset" value="重置">
        </div>
</form>

需要注意的是 一定要在form的包括当中 如果不是就无法提交数据到后台。
login.html
action是属于往哪个地方提交数据
method 提交时用于什么方法 默认不填就是get
name 属于整个提交当中的唯一标识
<label for="usernmae">用户名:</label>在左边提示for中的变量名一定是和input中的id是一致的,还有一个就是点击用户名就会自动跳转到input框当中
<button type="button">是提交整个form中的input数据
<input type="reset" value="重置"> 重置功能,属于批量清空删除input框中的数据,回到原始状态

当选和复选框

譬如<input type="checkbox" name="hobby" value="read">读书
checkbox就是复选框 可选多个
value 是当前input框中的值
<input type="radio" name="hobby" value="read">radio是当选框 如果是多个只能选择一个。

文件

<input type="file" name="myfiel" accept="image/png">type=file是文件类型的
accept限制是什么后缀名

下拉选择框

譬如

<select class= name="city">
            <option value="beijing">北京</option>
            <option value="guangzhou" selected="">广州</option>
            <option value="hangzhou">杭州</option>
</select>

下拉选择框不同input框 name只需一个包裹在select标签中,selected是默认选中项

文本框

<textarea name="article" id="" cols="30" rows="10"></textarea>
cols
rows

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

推荐阅读更多精彩内容

  • html表单用途 html用于收集用户的输入向服务端提交数据,从而实现用户与web端的交互 html表单的属性 1...
    zhangkun_sunset阅读 2,649评论 0 0
  • HTML 表单用于搜集不同类型的用户输入。 1.<form> 元素:<form> 元素定义 HTML 表单 1.<...
    饥人谷_兔子君阅读 2,755评论 0 0
  • 从浏览器的角度来看表单是如何工作的 浏览器加载表单页面。这个过程会创建所需的控件,如按钮、文本输入框等。 用户输入...
    小兀山丘阅读 1,670评论 0 1
  • 1. 简介 HTML 表单表示文档中的一个区域,包含了表单元素等交互控制原件,用于向 web 服务器提交信息。 f...
    饥人谷_风争阅读 2,571评论 0 0
  • python的数据类型 字符串:是以单引号'或双引号"括起来的任意文本 整数 小数 (浮点数) bool类型(只有...
    侑菲阅读 1,664评论 0 0