HTML(下)
form表单
表单功能
用于向服务器传输数据,从而实现与web服务器的交互
包含input系列标签,eg:文本字段,复选框,单选框,提交按钮等
还可以包含textarea、select、fieldset和lable标签
表单属性
属性 | 描述 |
---|---|
accept-charset | 规定在被提交的表单中使用的字符集(默认:页面字符集) |
action | 规定向何处提交表单的地址(URL)提交页面 |
autocomplete | 规定浏览器应该自动完成表单(默认:开启) |
enctype | 规定被提交数据的编码(默认:url-encoded) |
method | 规定在提交表单时所用的HTTP方法(默认:GET) |
name | 规定识别表单的名称 |
novalidate | 规定浏览器不验证表单 |
target | 规定action属性中地址的目标(默认:_self) |
<input>
输入标签(文本框)(内联标签)
<input>
元素会根据不同的type
属性,变化为多种形态。
你需要先看一看上面的这一段代码你能看的懂吗,里面的属性你是否又了解,不了解那就对了,你可以在下面的属性值中找找这些属性到底是干什么的。
<form>
姓名:<input value="呵呵" >逗比<br>
昵称:<input value="哈哈" readonly=""><br>
名字:<input type="text" value="name" disabled=""><br>
密码:<input type="password" value="pwd" size="50"><br>
性别:<input type="radio" name="gender" value="male" checked="">男
<input type="radio" name="gender" value="female" >女<br>
爱好:<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉
<input type="checkbox" name="love" value="bat">打豆豆
</form>
标签属性
1)type="属性值"
:文本类型。属性值可以是:
-
text
(默认) -
password
:密码类型 -
radio
:单选按钮,名字相同的按钮作为一组进行单选(单选按钮,天生是不能互斥的,如果想互斥,必须要有相同的name属性。name就是“名字”。
)。非常像以前的收音机,按下去一个按钮,其他的就抬起来了。所以叫做radio。 -
checkbox
:多选按钮,名字相同的按钮作为一组进行选择。 -
checked
:将单选按钮或多选按钮默认处于选中状态。当<input>
标签的type="radio"
时,可以用这个属性。属性值也是checked,可以省略。 -
hidden
:隐藏框,在表单中包含不希望用户看见的信息 -
button
:普通按钮,结合js代码进行使用。 -
submit
:提交按钮,传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后,这个表单就会被提交到form标签的action属性中指定的那个页面中去。 -
reset
:重置按钮,清空当前表单的内容,并设置为最初的默认值 -
image
:图片按钮,和提交按钮的功能完全一致,只不过图片按钮可以显示图片。 -
file
:文件选择框。
提示: 如果要限制上传文件的类型,需要配合JS来实现验证。
对上传文件的安全检查:一是扩展名的检查,二是文件数据内容的检查。
2)value="内容"
:文本框里的默认内容(已经被填好了的)
3)size="50"
:表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。
注意size属性值的单位不是像素哦。
4)readonly
:文本框只读,不能编辑。因为它的属性值也是readonly,所以属性值可以不写。
用了这个属性之后,在google浏览器中,光标点不进去;在IE浏览器中,光标可以点进去,但是文字不能编辑。
5)disabled
:文本框只读,不能编辑,光标点不进去。属性值可以不写。
type属性值速记
type属性值 | 表现形式 | 对应代码 |
---|---|---|
text | 单行输入文本 | <input type=text" /> |
password | 密码输入框(不显示明文) | <input type="password" /> |
date | 日期输入框 | <input type="date" /> |
checkbox | 复选框 | <input type="checkbox" checked="checked" name='x' /> |
radio | 单选框 | <input type="radio" name='x' /> |
submit | 提交按钮 | <input type="submit" value="提交" /> |
reset | 重置按钮 | <input type="reset" value="重置" /> 页面不会刷新,将所有输入的内容清空 |
button | 普通按钮 | <input type="button" value="普通按钮" /> |
hidden | 隐藏输入框 | <input type="hidden" /> |
file | 文本选择框 | <input type="file" /> |
多种按钮举例
<form>
<input type="button" value="我是一个普通按钮">
<br>
<input type="submit" value="我是一个提交按钮">
<br>
<input type="reset" value="我是一个重置按钮">
<br>
<input type="image" src="https://goss.veer.com/creative/vcg/veer/800water/veer-132444248.jpg">
<br>
<input type="file" value="我是一个文本选择框">
</form>
<select>
下拉列表标签(内联标签)
<select>
标签里面的每一项用<option>
表示。
select就是“选择”,option“选项”。
select标签和ul、ol、dl一样,都是组标签。
<select>
标签属性
multiple
:可以对下拉列表中的选项进行多选。没有属性值。size="2"
:如果属性值大于1,则列表为滚动视图。默认属性值为1,即下拉视图。
<form>
<select multiple="2">
<!--multiple="2"表示可以选两个-->
<option>小学</option>
<option>初中</option>
<option>高中</option>
</select>
<select size="2">
<!--滚动视图,我们可以自己写一写看看效果-->
<option>小学</option>
<option>初中</option>
<option>高中</option>
</select>
</form>
<option>
标签属性
selected
:预选中。没有属性值。
<form>
<select multiple="2" size="2">
<option>小学</option>
<option>初中</option>
<option selected="">高中</option>
<!--你在没有选之前,他会给你预先选一个,但是你可以更改-->
</select>
</form>
<textarea>
标签:多行文本输入框(内联标签)
text就是“文本”,area就是“区域”。这样你应该懂了吧!
属性
value
:提交给服务器的值。rows="4"
:指定文本区域的行数。cols="20"
:指定文本区域的列数。readonly
:只读。
<form>
<textarea cols="8" rows="5" readonly="">我是个小可爱</textarea>
</form>
<label>
标签(内联标签)
我们先看一段代码
<form action="">
<input type="radio" name="gender"/>男
<input type="radio" name="gender"/>女
</form>
上面一段代码会给我们显示一个选择性别的表单,我们会发现之后我们点击小圆点的时候,相应的性别才会被选中,如果单纯的点击文字(男或女)的时候并没有什么卵用,我们现在很想点击文字(男或女)的时候让他也能够选择,所以我们的<label>
标签就起了作用,他就像是一滴蜂蜜,把小圆点和文字黏在一起,让我们无论点击小圆点还是文字都会选中相应的性别
本质上来讲,“男”、“女”这两个文字和input标签时没有关系的,而label就是解决这个问题的。我们可以通过label把input和汉字包裹起来作为整体。
解决方法如下:
代码承上啊!!!!!!
<form action="">
<input type="radio" name="gender" id="f1"/><label for="f1">男</label>
<input type="radio" name="gender" id="f2"/><label for="f2">女</label>
</form>
上方代码中,input标签要有一个id,然后label标签有一个for属性,和id相同,那么这个label和input就有绑定关系了。
当然了,复选框也有label:(任何表单元素都有label)
继续送上我的代码!!!!
<form action="">
<input type="checkbox" id="c1"><label for="c1">记住密码</label>
</form>
表单的语义化
我们在注册一个网站的信息的时候,有一部分是必填信息,有一部分是选填信息,这个时候可以利用表单的语义化。
<form>
<fieldset>
<legend>必填信息</legend>
姓名:<input value="呵呵">逗比
<br>
昵称:<input value="哈哈哈说的就是你" readonly="">
<br>
名字:<input type="text" value="name" disabled="">
<br>
密码:<input type="password" value="pwd" size="50">
<br>
性别:<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
邮箱:<input type="email" name="user_email">
<!--type="email" name="user_email"在提交时会提醒你,必须要符合邮箱的规范-->
</fieldset>
<fieldset>
<legend>其他信息</legend>
爱好:<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉
<input type="checkbox" name="love" value="buy">买买买
</fieldset>
</form>