HTML 表单

概念:

表单就是一些可以填写或选择的东西

作用是收集用户填写或选择的信息

表单的组成:

1.表单域(容器,存放表单的地方)

2.提示信息(告诉用户需要填写的信息是什么)

3.表单控件(收集用户信息的东西,比如文本框,单选按钮等)

表单控件分类:

input标签:

1.单标签

2.type属性区分多种种类标签

文本框:

<input type='text' name='username'/>

密码框:

<input type='password' name='userpass'/>

单选按钮:

设置checked属性,就可以表示选中,单选功能需要把多个radio设置相同的name属性,设置相同name属性值以后,就会认为他们是一组单选按钮,只能选中一个

<input type='radio' checked name='sex' value='man'/>男

<input type='radio' name='sex' value='woman'/>女

复选框:

设置check属性,就可以表示选中

<input type='checkbox' name='hobby' checked value='eat'/>吃饭
<input type='checkbox' name='hobby' value='sleep'/>睡觉
<input type='checkbox' name='hobby' value='dadoudou'/>打豆豆

上传文本框:

<input type='file' name='myfile'/>

隐藏域:

用于提交一些不想被用户看到的信息

<input type='hidden' name='myTel' />

通过value属性可以设置按钮的内容

普通按钮:

<input type='button' value='普通按钮'/>

普通按钮不能提交数据,也不会重置数据

提交按钮:

<input type='submit' value='提交数据'/>

重置按钮:

<input type='reset' value='重新填写'/>

图片按钮:

<input type='image' src='./图片路径'/>

1.设置图片按钮时,通过src属性设置图片按钮的路径,不能更改图片的大小,图片按钮也有提交数据的功能

2.width属性设置宽度,height设置高度

form表单:

1.form表示表单域

2.用form把所写的表单包起来

3.form标签的action属性表示数据提交到哪里去

4.取值是一个url

5.form标签的method属性表示数据提交的方式,get(默认)或者post

<form action="" method="get"></form>

6.get提交的数据会拼接到url(统一资源定位符,简单理解就是网址)地址栏中,拼接形式是url?键名1=键值1&键名2=键值2...

7.post提交得数据不会出现在url中

注意:

1.表单控件需要设置name属性,这样提交数据时,才是有效提交,并且后端才可以通过name属性区分是哪个控件提交过去的数据

2.某些控件需要设置value属性,value属性才是真正提交到后端的数据

button标签:

1.设置form才可以提交数据

2.不设置type属性的按钮,默认时提交按钮

提交按钮

<button type='submit'>提交按钮</button>

重置按钮

<button type='reset'>重置按钮</button>

普通按钮

<button type='button'>普通按钮</button>

没有图片按钮

textarea标签:

文本域,通过rows设置宽度,通过cols设置宽度,设置form属性

多行文本框(文本域):

<textarea row='3' cols='3' placeholder='提示'></textarea>

select标签:

1.下拉框,通过option设置选项,默认下拉框会选中第一项,默认下拉框的宽度由最宽的选项内容决定

2.select可以设置size属性,表示显示多少个选项

3.select可以设置multiple属性,表示允许多选,可以按Ctrl或者shift键

4.使用optgroup标签,可以对选项进行分组

<optgroup label='省份'></optgroup>
<select size='5' multiple>

5.给option选项设置selected属性,可以指定选中项

6.如果option没有设置value属性,那么value属性值将使用option的标签内容,提交数据时,会提交选中项的value属性值

<select name="" id="" size="2" multiple="3">
 <optgroup> 
  <option value="">111111</option> 
  <option value="">222222</option>
  <option value="">333333</option>
 </optgroup> 
</select>

项目标题标签:

1.使用label标签包裹要设置的内容和表单元素

<label>
 用户名:<input type='text'/>
</label>

 2.使用label中的for属性 for="id名" 表单元素需要设置一个id属性

<label for='mypassword'>密码:</label>
<input type='password' id='mypassword' />

单选按钮:

<label><input type='radio' name='sex'>男</label>
<label><input type='radio' name='sex'>女</label>

3.placeholder属性:

占位符,当某些表单控件value值为空的时候,placeholder属性设置的值才会显示出来

<input type='text'placeholder='提示'>

4.value属性:可以设置表单控件默认显示的内容:

<input type='text' value='zhangsan'>

5.disabled:禁用控件,不能修改值也不能输入值,数据不会提交

<input type='text' disabled/>

6.readonly:只读,内容不能修改,数据可以提交

<input type='text' readonly/>

7.autofocus:光标闪烁,自动获取焦点 ,只生效一个

<input type='text' autofocus/>

8.autocomplete:表单的自动填充功能,取值off或者on(默认),默认不用写,关闭要写

<input type='text' name='age' placeholder='提示' autocomplete='off'/>

想要使用autocomplete属性触发表单自动填充功能,前提是这个表单控件需要一个name属性,并且成功提交过数据,才会把之前成功提交过的数据记录下来

9.required:适用绝大部分input元素,表示该值为必选项或者提交表单前必须检查该值(布尔值)

<input type='text' required/>

10.maxlength:可以输入的字符或者中文的最大个数

<input type="text" maxlength="10" />

11.size:控件的可见宽度取值数值(默认20)

 <input type="text" size="10" />

12.multiple除了可以让下拉框可以选择多个选项,还可以让file上传框允许选择多个文件

 <input type="file" multiple />