html表单实例HTML中表单的运用实例

HTML 表单的功能：常用于登记信息的输入，或搜集不同类型的用户输入。
表单用于向做事器传输数据。
HTML 表单元素：

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<input> 元素元素有很多形态，根据不同的 type 属性。

html表单实例HTML中表单的运用实例 Docker

文本域(Text fields) <input>元素

<p>请输入您的姓名：<br /><input type=\"大众text\公众 name=\"大众name\"大众 id=\公众name\"大众 class=\"大众txt\公众/></p>

Text fields

<select>元素、<option>元素

大略的带有预选值的下拉列表，即预选值指预先指定的首选项。

<p>请选择你喜好的颜色：<br /><select name=\公众color\"大众 id=\"大众color\"大众><option value=\"大众red\"大众>红</option><option value=\公众green\"大众>绿</option><option value=\"大众blue\"大众>蓝</option><option value=\"大众yellow\"大众>黄</option><option value=\"大众cyan\"大众>青</option><option value=\"大众purple\"大众>紫</option></select></p>

表单单选按钮元素： radio元素

<p>叨教你的性别是：<br /> <input type=\公众radio\公众 name=\"大众sex\公众 id=\"大众male\公众 value=\公众male\"大众 class=\"大众rad\公众 />男<br /> <input type=\公众radio\"大众 name=\"大众sex\公众 id=\"大众female\公众 value=\公众female\"大众 class=\"大众rad\"大众 />女</p>

表单复选框元素：checkbox元素

<p>叨教你喜好做些什么：<br /> <input type=\公众checkbox\"大众 name=\"大众hobby\"大众 id=\"大众book\公众 value=\"大众book\公众 class=\"大众check\"大众 />看书 <input type=\"大众checkbox\"大众 name=\"大众hobby\"大众 id=\"大众net\公众 value=\"大众net\"大众 class=\公众check\"大众 />上网 <input type=\"大众checkbox\"大众 name=\公众hobby\"大众 id=\"大众sleep\"大众 value=\公众sleep\公众 class=\"大众check\"大众 />睡觉</p>

文本域(Textarea)（多行文本输入掌握，在文本域中，可写入的字符字数不受限定）

表单提交按钮元素：submit元素 class类选择器

form自身属性： action 、 method

1，action：表示当前表单中的内容提交给哪个页面进行处理

2，method:表示当前表单提交的办法，常见的有get和post办法，默认是get提交

<form method= \公众get\"大众> 利用展现形式：

<form method = \公众post\"大众 > 利用展现形式：

<form> 的兼容性：

险些所有的浏览器都支持<form>表单标签。

附一个大略的表单运用案例：

根本信息表单

HTML代码：

<!DOCTYPE html PUBLIC \公众-//W3C//DTD XHTML 1.0 Transitional//EN\"大众 \公众http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"大众><html xmlns=\"大众http://www.w3.org/1999/xhtml\公众><head><meta http-equiv=\公众Content-Type\"大众 content=\公众text/html; charset=utf-8\"大众 /><link rel=\"大众stylesheet\"大众 type=\"大众text/css\公众 href=\"大众information.css\"大众/><title>根本信息表单</title></head><body><form method=\"大众post\公众><p>请输入您的姓名：<br /><input type=\"大众text\"大众 name=\公众name\"大众 id=\公众name\"大众 class=\"大众txt\公众/></p><p>请选择你喜好的颜色：<br /><select name=\公众color\公众 id=\"大众color\公众><option value=\公众red\公众>红</option><option value=\"大众green\公众>绿</option><option value=\公众blue\"大众>蓝</option><option value=\"大众yellow\"大众>黄</option><option value=\"大众cyan\"大众>青</option><option value=\公众purple\公众>紫</option></select></p><p>叨教你的性别是：<br /> <input type=\"大众radio\公众 name=\"大众sex\"大众 id=\公众male\"大众 value=\公众male\"大众 class=\公众rad\"大众 />男<br /> <input type=\"大众radio\"大众 name=\"大众sex\公众 id=\公众female\"大众 value=\公众female\"大众 class=\"大众rad\公众 />女</p><p>叨教你喜好做些什么：<br /> <input type=\"大众checkbox\"大众 name=\"大众hobby\"大众 id=\"大众book\"大众 value=\"大众book\"大众 class=\公众check\"大众 />看书 <input type=\"大众checkbox\"大众 name=\公众hobby\"大众 id=\"大众net\"大众 value=\"大众net\"大众 class=\"大众check\"大众 />上网 <input type=\"大众checkbox\"大众 name=\"大众hobby\"大众 id=\"大众sleep\"大众 value=\"大众sleep\"大众 class=\"大众check\"大众 />睡觉</p> <p>我要留言：<br /> <textarea name=\"大众comments\"大众 id=\"大众comments\公众 cols=\"大众30\公众 rows=\公众4\公众 class=\公众textarea\"大众></textarea></p><p><input type=\公众submit\"大众 name=\"大众btnSubmit\"大众 value=\公众Submit\"大众 class=\"大众btn\"大众 /></p> </form></body></html>

对表单形式进行修正的CSS样式如下：

@charset \公众utf-8\"大众;/ CSS Document /form{width:250px;height:350px;border:1px dotted #aAAAAA;padding:1px 6px 1px 6px;margin:0px;font:14px Arial, Helvetica, sans-serif;}input{color:#00008b;}input.txt{border:1px inset #00008b;background-color:#ADd8e6;}input.btn{color:#00008b;background-color:#add8e6;border:1px outset #00008b;padding:1px 2px 1px 2px;}select{width:80px;color:#00008b;background-color:#add8e6;border:1px solid #00008b;}textarea{width:200px;height:40px;color:#00008b;background-color:#add8e6;border:1px inset #00008b;}

以上知识是我在学习过程中理解到的关于表单的干系知识，我们可以相互互换，学习。

（文中部分图片来自网络，若有侵权，请联系改动）