HTML中form表单的用法

form表单有什么作用?有哪些常用的input 标签,分别有什么作用?

  • form表单的作用
    form标签用于为用户输入创建HTML表单,并向服务器传输用户输入的数据
  • 常用input标签,以及它们的作用
    1. type="text" 文本域,用户可以在文本域写入文本,不可以换行

<input type="text" name="firstname">

  1. type="password" 密码域,用户可以在密码域中输入密码

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

  1. type="checkbox" 复选框,提供多选选项 加checked属性会默认选上

<input type="checkbox" name="Bike">

  1. type="radio" 单选框,提供单选选项 name要相同才能实现单选

<input type="radio" checked="checked" name="Sex" value="male" />

  1. select 下拉列表,加selected是带有预选值的下拉列表

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>

  1. textarea 文本域,创建一个多行文本输入,用户可以写入文本,字符字数不受限制

<textarea rows="10" cols="30">

  1. type="button" 创建按钮,可以对按钮上的文字进行自定义

<input type="button" value="Hello world!">

  1. fieldset 在数据周围绘制一个带标题的框

<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>

  1. type="submit" 发送 ,定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

<input type="submit" value="发送">

  1. type="reset" 定义重置按钮。重置按钮会清除表单中的所有数据。

<input type="reset" value="Reset" />

  1. type="hidden" 定义隐藏字段,隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值,用于安全性校验

<input name="csrf_token" type="hidden" value="a23dafd23444" />

  1. type="file" 用于文件上传

<input type="file" name="file1">

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容