ccs之表单

使用<img>来插入图片

语法:<img src="图片地址"alt="下载失败时的替换文本"title="提示文本">

举例:<img src="图片网址xxx"alt="当图像下载失败时,显示的文字(显示不出)"title="鼠标放在图片上显示的文本信息">

图像可以是GIF,PNG,JPEG格式的图像文件


网站怎样与用户进行交互?答案是使用HTML表单(form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。

语法:<form method="传送方式"action="服务器文件">xxxx</form>

form:标签是成对出现的,以<form>开始,以</form>结束。

method:数据传送的方式(get/post)。

action:浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)

注意:

所有表单控件(文本框、文本域、按钮、单选框、复选框等)都要放在<form></form>标签之间

例如:


文本框与密码框



文本框的多行文本输入


当用户需要在表单中输入大段文字时,需要用到文本输入域

语法:

<textarea rpws="行数" cols="列数">输入的内容</textarea>


单选框与复选框

语法:<input type="radio/checkbox" value="值"name="名称"checked="checked"/>

type:radio为单选,checkbox为复选

value:提交数据到服务器的值(后台php使用)

name:控件的命名,以备后台ASP PHP使用

checked:如果设置这个,则该选项默认选中

注:同一组单选的name一定要一样,不然可以多选!


下拉列表框

<option value="提交的值" selected="selected:>选项</option>

如果设置selected,则这个选项设为默认。

他也可是设置多选,windons系统按住Ctrl+单机,在select标签中设置multiple="multipl"


提交按钮,重置按钮

在表单中有两种按钮可以使用,分别是提交按钮和重置。

提交按钮:用户需要提交信息到服务器时,需要用到的按钮。

语法:

<input type="submit" value="提交">

type:设置为submit时,这个按钮才有提交的功能

value:按钮上显示的文字


重置按钮:用户需要重置表单信息到初始化状态

语法:

<input type="reset" value="重置">

type:设置为reset时,有重置功能

value:按钮上显示的文字


label标签

label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)

语法:

<label for="控件id名称">

例如:

<form>

<label for="male">男</label>

<input type="radio" name="gender"id="male"/>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ********** 未经本人允许,严禁转载任何网站 ********** 本人在慕课网学习HTML+CSS基础课...
    zhaolion阅读 13,745评论 46 548
  • 表单基础知识 在HTML中,表单是由 元素来表示的,而在JS中,表单对应的则是HTMLFormElement类型。...
    oWSQo阅读 4,392评论 0 1
  • 引言 在日常开发Android中,很多时候会遇到和WebView打交道,对CSS HTML JS不是很清楚的话是完...
    张文靖同学阅读 7,856评论 0 11
  • “别的信也都是这样,几乎都很感谢我的回答。这当然是值得欣慰的事情,不过从我读到的内容来看,我的回答之所以发挥...
    Coco随手笔阅读 1,378评论 0 0
  • 最冷的车站,在高铁桥底下,冷风从顶上直灌而下,幸好南门没有开,不然真是四面来风。椅子实在也不想去坐,不是因为它生锈...
    Jane输了阅读 2,920评论 0 0