web从零学起记录--html1.1-表单

来源：互联网发布：java基础看不懂编辑：程序博客网时间：2024/05/24 00:07

WEB初学者最重要的三门外语好吧：html、css、javascript.

这些都自然在W3School上学。

这里就从html表单方面记起吧，前面也没什么好说的，html就是一种标记语言，站上也讲得很简单，这里就先把它上面的常用标签贴出来：

HTML 4.01 快速参考

HTML 文档类型
XHTML 简介

来自 W3School 的 HTML 快速参考。可以打印它，以备日常使用。

HTML Basic Document

<html><head><title>Document name goes here</title></head><body>Visible text goes here</body></html>

Text Elements

<p>This is a paragraph</p><br> (line break)<hr> (horizontal rule)<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em><strong>This text is strong</strong><code>This is some computer code</code>

Physical Styles

<b>This text is bold</b><i>This text is italic</i>

Links, Anchors, and Image Elements

<a href="http://www.example.com/">This is a Link</a><a href="http://www.example.com/"><img src="URL"alt="Alternate Text"></a><a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:<a name="tips">Useful Tips Section</a><a href="#tips">Jump to the Useful Tips Section</a>

Unordered list

<ul><li>First item</li><li>Next item</li></ul>

Ordered list

<ol><li>First item</li><li>Next item</li></ol>

Definition list

<dl><dt>First term</dt><dd>Definition</dd><dt>Next term</dt><dd>Definition</dd></dl>

Tables

<table border="1"><tr>  <th>someheader</th>  <th>someheader</th></tr><tr>  <td>sometext</td>  <td>sometext</td></tr></table>

Frames

<frameset cols="25%,75%">  <frame src="page1.htm">  <frame src="page2.htm"></frameset>

Forms

<form action="http://www.example.com/test.asp" method="post/get"><input type="text" name="lastname"value="Nixon" size="30" maxlength="50"><input type="password"><input type="checkbox" checked="checked"><input type="radio" checked="checked"><input type="submit"><input type="reset"><input type="hidden"><select><option>Apples<option selected>Bananas<option>Cherries</select><textarea name="Comment" rows="60"cols="20"></textarea></form>

Entities

&lt; is the same as <&gt; is the same as >&#169; is the same as ©

Other Elements

<!-- This is a comment --><blockquote>Text quoted from some source.</blockquote><address>Address 1<br>Address 2<br>City<br></address>

Source : http://www.w3school.com.cn/html/html_quick.asp

HTML表单：

看了相关知识后，我用代码实现了一些简单的功能如图所示，足以解释表单知识：

代码如下：仅供本人菜鸡观赏而已

 <!DOCTYPE html> <html> <body><form  method="GET"><fieldset><legend>Personal information</legend>First name:<br><input type="text" name="firstname" placeholder="First name" autofocus><br>Last name:<br><input type="text" name="lastname" value="Guy" placeholder="Last name" readonly><br><input type="email" name="email" autocomplete="on"><br><input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female<br><br><input type="checkbox" name="vehicle" value="ifhaveabike">I have a bike<br><input type="checkbox" name="vehicle" value="ifhaveacar">I have a car<br><select name="cars"><option value="audi">Audi</option><option value="saab">Saab</option><option value="bmw">BMW</option></select><br>  Birthday:<br><input type="date" name="bday" min="1980-01-01" max="2017-01-22"><br>  Quantity (between 1 and 5):    <input type="number" name="quantity" min="1" max="5"><br><textarea name="message" rows="10" cols="30">The cat was playing in the garden</textarea><br><button type="button" onclick="alert"("aha!you've clicked!")>Click ME!</button><br>  选择图片<input type="file" name="img" multiple><br></fieldset><fieldset><legend>Assistant</legend>User name:<br><input type="text" name="username">User password:<br><!--password 会做掩码处理--><input type="password" name="psd"></fieldset><br><br><input type="submit" value="Submit Now"></form></body></html>

0 0