HTML和CSS学习笔记第14章——HTML表单

返回主目录

<form>

<form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST">
 <p>Just type in your name (and click Submit) to enter the contest:<br>

   First name: <input type="text" name="firstname" value=""><br>
   Last name:  <input type="text" name="lastname" value=""><br>
   <input type="submit">
 </p>
</form>

可以利用<form>创建表单。现在几乎所有的块元素都可以放进<form>里面。

action属性指定服务器接受的脚本所在的位置。

method属性确定表单数据如何发送到服务器。最常用“POST"。

value 属性为 input 元素设定值。

对于不同的输入类型，value 属性的用法也不同：

• type=“button”, “reset”, “submit” - 定义按钮上的显示的文本
• type=“text”, “password”, “hidden” - 定义输入字段的初始值
• type=“checkbox”, “radio”, “image” - 定义与输入相关联的值

<input>

type属性指示你希望得到的输入的类型。
name属性指示表单元素的名字。大多数表单元素都需要名字供浏览器脚本相当于变量名使用。
value会作为变量值返回。
如果指定required属性，那么该域必须有一个值，表单才能正常提交。

文本输入

<input type="text" name="name" value="">

可以使用maxlength属性限制输入长度。

文本区

<textarea name="comments" rows="10" cols="48"></textarea>

<textarea>元素会创建一个多行的文本区，可以在其中输入多行文本。如果输入的文本在文本区中放不下，右边还会出现一个滚动条。

<textarea>元素不是一个空元素，所以它有开始和结束标志。之间出现的文本会成为文本区中的初始文本。
rows属性和cols属性指定文本区长宽度多少个字符。
无法限制输入长度。

数字输入

<input type="number" min="0" max="20">

min和max指定允许输入的数字范围。超出范围在提交表单时会提示错误。

范围输入

<input type="range" min="0" max="20" step="5">

类似number，但它是个滑动条。

颜色输入

<input type="color">

利用它可以指定一个颜色，单击该控件时，会弹出一个颜色选择器，允许你选择一个颜色，而不必输入颜色名或值。

点击后：

日期输入

<input type="date">

如果浏览器不支持，则得到一个常规的文本输入控件。

text<input>变种

以下三种在桌面浏览器就是一个文本输入元素，只不过在一些移动浏览器上，输入时会得到一个方便输入email的定制键盘。类似/, @和数字。
email输入

<input type="email">

tel输入

<input type="tel">

url输入

<input type="url">

提交

<input type="submit">

submit语句会创建一个按钮，允许你提交表单。

单选

<input type="radio" name="beantype" value="whole"> Whole bean<br>
<input type="radio" name="beantype" value="ground" checked>Ground

每个选项使用一个radio<input>元素。
每一组选项相关联的按钮比如name相同，然后在value不同。
想要某个值默认被选中，可以使用布尔属性checked。

多选

<input type="checkbox" name="spice[]" value="Salt">Salt<br/>
<input type="checkbox" name="spice[]" value="Pepper">Pepper<br/>
<input type="checkbox" name="spice[]" value="Garlic">Garlic

与单选差不多。但发送数据会以类似“ spice=salt&pepper&garlic”的形式发送。

如果增加布尔属性multiple，可以得到多选菜单。不再显示下拉菜单（选项太多就会有滚动条），可以用同时按下Ctrl键或Command键控制多选。

选择菜单

<select>和<option搭配使用。

<select name="beans">
     <option value="House Blend">House Blend</option>
     <option value="Bolivia">Shade Grown Bolivia Supremo</option>
     <option value="Guatemala">Organic Guatemala</option>
     <option value="Kenya">Kenya</option>
</select>

<option>元素的内容用作菜单项的描述，不必有name，每个菜单项还包含表示该菜单项的值。

文件输入

<input type="file" name="doc">

允许你选择一个文件并提交。此元素的使用前提是必须使用POST方法。

提交方法POST和GET

它们都是将你的表单数据从浏览器发送到服务器，不过采用了两种不同的方式，POST会打包你的表单变量，在后台把它们发送到服务器，GET也会打包你的表单变量，但会把这些数据追加到URL最后，然后向服务器发送一个请求。


加书签的意思是，对结果页面加入书签，下次再打开时，GET的结果页面能重现之前保存的结果，而POST不能。

<fieldset>和<legend>

HTML提供了<fieldset>将公共元素组织在一起。<legend>可以为该组提供一个标签。

<fieldset>
		<legend>Ship to</legend>
		<div class="tableRow">
			<label for="name">Name:</label>
			<input type="text" id="name" name="name" value="" placeholder="Buckaroo Banzai" required> 
		</div>
		<div class="tableRow">
			<label for="address">Address:</label>
			<input type="text" id="address" name="address" value="" placeholder="Banzai Institute" required> 
		</div>
		<div class="tableRow">
			<label for="city">City:</label>
			<input type="text" id="city" name="city" value="" placeholder="Los Angeles" required> 
		</div>
		<div class="tableRow">
			<label for="state">State:</label>
			<input type="text" id="state" name="state" value="" placeholder="CA" required>
		</div>
		<div class="tableRow">
			<label for="zip">Zip:</label>
			<input type="text" id="zip" name="zip" value="" placeholder="90050" required>
		</div>
		
	</fieldset>

输入提示

使用placeholder属性可以在大多数<input>元素中提供一个提示。以但点击就会消失。