HTML学习(六)——表单

<input>表单是提供给网页浏览者输入、勾选和选取的数据,以便提供到服务器数据库的工具。


文本栏:

<input type="text" name="栏位名称" value="栏位内定值" size="栏位显示宽度" maxlength="栏位数据输入最大长度" readonly="readonly">

对于普通的文本栏表单,一般需要如下属性名称:type, name, value, size, maxlength


密码栏:

<input type="password" name="栏位名称" value="栏位内定值" size="栏位显示宽度" maxlength="栏位数据输入最大长度" readonly="readonly">

对于密码栏表单,一般需要如下属性名称:type, name, value, size, maxlength


隐藏栏:

<input type="hidden" name="栏位名称" value="栏位值">

隐藏栏用于放置固定要发送到数据库的值,但是又不想让浏览者发现或更改的数值。


复选框:

爱好:<input type="checkbox" name="hobby" value="音乐"> 音乐 <input type="checkbox" name="hobby" value="体育"> 体育

复选框的<input>属性名称type需要设定为checkbox;同一个复选框内容下的name要保持一致;同时设定不同的value,意思是当该选框勾选时,会自动发送value值到数据库。

属性名称还包括:checked(默认状态下选框就是选中的), disabled(默认状态下就不能修改的选框)


单选框:

性别:<input type="radio" name="gender" value="男"> 男 <input type="radio" name="gender" value="女"> 女

单选框的<input>属性名称type需要设定为radio;同个单选框内容下的name要保持一致;同时设定不同的value,意思是当该选框勾选时,会自动发送value值到数据库。

属性名称还包括:checked(默认状态下选框就是选中的), disabled(默认状态下就不能修改的选框)


窗体栏位:

地址:<select name="address"> <option value="上海">上海 <option value="南京“>南京 <option value="深圳” selected>深圳 </select>

即创建一个窗体表单,可以选择上海、南京或深圳作为地址,其中深圳市首选项。

标记<select>还可以添加属性名称size,设定值为数字,将可选表单扩展为多行,同时显示多个选项。属性名称multiple,添加后支持多选。

加入标记<optgroup lable=""> </optgroup>可以对表单内容进行分组。

<select name="address"> 

<optgroup label="上海">

<option value="徐汇区">徐汇区

 <option value="宝山区“>宝山区

</optgroup>

 <optgroup label="深圳">

<option value="南山区">南山区

 <option value="福田区“>福田区

</optgroup>

</select>


文字区块:

<textarea name="content"> </text area>

属性名称:cols 文字区块长度;rows 文字区块宽度


按钮与表单功能结构:

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

<input type="reset" value="重置"> 点击后表单会恢复到初始化状态

注意,在使用按钮功能时,必须用<form> </form>限制住所有表单内容区域。<form>标记具有如下属性名称:

属性名称 设定值 说明
name 字符串 为接下来的表单命名
method get/post 表单的传输方式
action URL 传输目标
action不设置的情况下,默认是发送给自己。method如果采用get,那么在传输时,浏览器地址一栏会显示信息传输内容,如果采用post,传输的内容会被隐藏。


按钮图像与图像按钮:

按钮图像:即按钮上放置图片,可以赋予提交和重置的功能

<button name="栏位名称" type=“submit/reset”> <img src="URL"> </button>

图像按钮:将图像设置为可以点击的按钮,没有提交和重置的功能

<input type="image" src="URL" alt="文本">


允许上传文件:

上传:<input type="file" name="uploadfile">


为表单加上外框和标题:

<fieldset>...</fieldset>:放置于<form>...</form>内

<legend>注册表单</legend>:放置于<fieldset>下方

发布了34 篇原创文章 · 获赞 5 · 访问量 1万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章