欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML表单--如何使用HTML创建表单

程序员文章站 2022-03-10 17:56:56
HTML 表单用于收集用户输入,与服务器进行交互,使用form元素来定义一个HTML表单。下面简单介绍表单中常见元素的用法。1.表单标签 form属性:action :数据提交的服务器地址method: 数据提交的方法数据提交方法一般有两种:get: 查询服务器的数据post:修改服务器的数据
2.表单域 input用户可以交互的控件。2.1文本框类型 text

HTML表单是什么?
HTML 表单用于收集用户输入,与服务器进行交互,使用form元素来定义一个HTML表单。
下面简单介绍表单中常见元素的用法。

1.表单标签 form

属性:

  • action —数据提交的服务器地址
  • method— 数据提交的方法

数据提交方法一般有 get和post两种 。

  • get—查询服务器的数据
  • post—修改服务器的数据
<form action=""method="post">
</form>

2.表单域 input

用户可以交互的控件。

2.1文本框类型 text
用户名:<input type="text" placeholder="请输入用户名">

效果:HTML表单--如何使用HTML创建表单

其中placeholder是文本提示,可以在控件未获得焦点时显示提示信息,而在获得焦点时提示消失。

2.2密码框
密码:<input type="password" placeholder="6位以上">

效果:HTML表单--如何使用HTML创建表单
当 type=password 时为 “密码字段”,密码域的输入框会对输入信息做掩码处理。

2.3单选 radio
性别:<label><input type="radio" name="sex"></label>
	<label><input type="radio" name="sex" checked="checked"></label>

效果:
HTML表单--如何使用HTML创建表单
可以对 input 标签增加 checked属性实现预选。

2.4多选
爱好: <label><input type="checkbox" name="fav">唱歌</label>
	  <label><input type="checkbox" name="fav">跳舞</label>
	  <label><input type="checkbox" name="fav" checked="checked">看书</label>

效果:HTML表单--如何使用HTML创建表单
多选按钮和单选一样,通过相同的name属性值来识别同一组按钮。

2.5下拉
学历:<select>
				<option>北京</option>
				<option>上海</option>
				<option >杭州</option>
				  </select>

效果:HTML表单--如何使用HTML创建表单

2.6文件上传 file
头像:<input type="file"/>

效果:HTML表单--如何使用HTML创建表单

2.7多行文本 textarea
留言:
				<textarea rows="5" cols="30">
				</textarea><br>

效果:HTML表单--如何使用HTML创建表单

2.8提交按钮 submit
<input type="submit" value="上传信息"/>
<button type="submit">上传信息"</button>

效果:HTML表单--如何使用HTML创建表单

2.9重置按钮 reset
<input type="reset" value="擦掉重写"/>
<button type="reset">擦掉重写"</button>

效果:HTML表单--如何使用HTML创建表单
点击按钮会清空表单内填写的信息,即重置表单为初始默认状态。

3.lable标签

input元素定义标注(标题)。

<label><input type="checkbox"/>看书</label>
<label><input type="radio"/></label>

以上就是对如何创建HTML表单的全部介绍。

本文地址:https://blog.csdn.net/qiu199812/article/details/112687191

相关标签: html html5