1.什么是表单?表单用来干嘛
HTML表单是一种用于收集用户输入数据的交互性元素。它可以用于创建各种类型的表单,如用户注册、登录、搜索等。表单允许用户在网页上输入数据,然后将这些数据提交给服务器进行处理。表单通常包含各种输入字段,例如文本框、复选框、单选按钮、下拉列表等,以及提交按钮,用于将用户输入的数据发送到服务器。服务器可以根据收到的数据执行相应的操作,例如保存用户信息、执行搜索操作等。HTML表单的作用是促使用户与网站进行交互,并在后台进行处理以满足用户需求。
1.1表单介绍
表单分为三个部分,表单域、表单元素、提交信息。
表单域的标签是:
<form>
表单域
</form>
表单元素的标签是:
<form>
<input type="">
</form>
提交信息的标签是:
<form>
<input type="button"value="按钮">
<button>按钮2</button>
</form>
2.表单基础内容
2.1 form标签:
action=“url地址” 数据要传送到的地方
method=“提交方式” 有get(请求获取数据)和post(发送数据到后台,传递数据,创建数据)可以选择
name=“表单域名称” 定义一个名字
代码演示:
<!--传递数据到www.baidu.com地址-->
<form action="www.baidu.com" method="post" name="biaodan">
</form>
2.2常用的表单标签:
文本框: text
<input type="text" value="文本框">
密码框: password
密码<input type="password">
单选框:radio
<!-- 单选框 -->
性别<input type="radio" name="sex1">男
<input type="radio"name="sex1">女
注* 需要注意的是 单选框需要给元素添加name属性 name相同才能实现单选
复选框:checkbox
<!--复选框 -->
爱好<input type="checkbox" >音乐<input type="checkbox">游戏<input type="checkbox">篮球
<!--如果想默认☑爱好的话可以在input标签中加上 checked属性 默认选中-->
邮箱:email
邮箱<input type="email">
电话:tel
电话<input type="tel">
数字框:number
<!--只能填写数字 -->
数字框<input type="number">
邮箱:email
邮箱<input type="email">
网址:url
url<input type="url">
文件上传:file
文件上传:<input type="file">
滑块:range
滑块<input type="range">
下拉框:select
<!-- 下拉列表 <option> 选项值-->
<select name="s1" >
<option>长沙</option>
<option selected>湘潭</option> <!-- selected指定默认选中 -->
<option>深圳</option>
</select>
文本域:textarea
个人简介<textarea name="t1" cols="20" rows="3"></textarea>
<!--cols 设置列数 rows 设置行数-->
日历时间:date
日历时间<input type="date">
图片元素:image
图片元素<input type="image" src="../image/1.jpg" alt="1">
<img src="../image/1.jpg" alt="1">
<!-- img标签 与image元素 大致相同 -->
按钮:
- 提交按钮 :submit
- 普通按钮:button
- 重置按钮:reset
<!-- 提交按钮 -->
<input type="submit" value="提交">
<!-- 重置按钮 -->
<input type="reset" value="重置">
<!-- 普通按钮 -->
<input type="button" value="按钮">
<button>按钮2</button>
以上表单标签运用联合CSS美化后 效果如图:
当然了<input>中还有其它的属性值:
name 定义input元素的名称
value 规定input元素的值
checked 规定input元素首次加载时的初始化
maxlength 最大长度
minLength 最小长度
size 输入框得的长度
placeHolder 输入框提示
disabled 禁用
readonly 只读
required 输入框必填
hidden 隐藏
selected 下拉框中指定默认选中