web从零学起记录--html1.1-表单-优快云博客

本文链接：https://blog.youkuaiyun.com/we08guyy/article/details/54671550

本文介绍了HTML表单的基础知识，包括不同类型的输入元素如文本框、复选框等，并通过实例展示了如何创建表单及各元素的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

这些都自然在W3School上学。

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

HTML 4.01 快速参考

来自 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>