【Html】13-初识表单

表单

表单的目的:提供服务 收集信息

工作原理

页面=>form表单页面=>输入数据=>submit提交=>浏览器打包发送服务器=>接受处理返回数据

form属性

双标签|块 — 存储表单元素的一个区域

属性	描述
action	“提交表单的地址”-发送的目的地
method	“提交方式” get（获取信息）/post(发送信息)

method属性值

属性值	描述
get	会在地址栏显示用户信息，数据传输量少，不安全
post	安全性相对于get较大，数据传输量大，不是绝对的安全

表单组件

input标签

单标签|行内块

属性	描述	属性	描述
type	“信息输入类别”（默认值为text）	placeholder	用户名密码框未输入内容时,默认显示的文本；在用户输入的时候会自动消失。
name	元素的名称	value	元素的默认值（发送到服务器时的名称）

input type属性值

属性值	描述	属性值	描述
text	普通文本输入框	time	时间控件
password	密码输入框	date	日期控件
submit	提交按钮	datetime	时间日期控件
button	普通按钮	week	周控件
reset	重置按钮	month	月控件
file	文件域按钮【value='multiple’时可以同时选择多个文件】	datetime-local	本地时间日期控件
radio	单选按钮【需要绑定相同的name值】	url	输入URL字段
checkbox	复选按钮	tel	用来输入电话号码
		search	搜索字符串
		email	用来输入"email"地址
		color	颜色控件
		number	数字文本
		hidden	隐藏域
		image	图像按钮
		range	输入数值

text

普通文本框：<input type="text">

password

密码：<input type="password">

submit

<input type="submit">

button

<input type="button" value="没有默认文本">

reset

<input type="reset">

file

<input type="file">

radio

需要设置相同的name值，建立联系

豆沙<input type="radio" name="example">
菠萝<input type="radio" name="example">
凤梨<input type="radio" name="example">

checkbox

豆沙<input type="checkbox" >
菠萝<input type="checkbox" >
凤梨<input type="checkbox" >

input行内样式

行内样式	描述
hidden	隐藏（不占有原来位置）
checked	默认选中

input状态伪类

• input:checked表单被选中的状态；

• input:focus输入框被聚焦的状态；

  

• • style="outline:none"去除聚焦的默认边框

    

label

通过属性for=" "绑定id名;

一般与input标签搭配使用;

点击label标签，相当于点击绑定id的标签；

普通文本框：<input type="text"id="text" >
<label for="text">点我</label>

select

下拉框选项（搭配option（下拉选项）一起使用）;

select : selected（默认选中）

<select >
        <option value="1">一</option>
        <option value="2">二</option>
        <option value="3">三</option>
        <option value="4">四</option>
        <option value="5">五</option>
</select>

fieldset

创建分组；

搭配legend（分组标题）一起使用

<fieldset>
        <legend>标题在这</legend>
        豆沙<input type="radio" name="example">
        菠萝<input type="radio" name="example">
        凤梨<input type="radio" name="example">
</fieldset>

textarea

多行文本框

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

• • style="resize：none;"禁止拉伸

---

END