Web开发-HTML基础4

学习资源来自www.w3school.com.cn

1.HTML表单

HTML表单用于收集不同类型的用户输入，<form>元素定义HTML表单

HTML表单包含表单元素：

<input>元素，根据不同的type属性(text,radio,submit等等)：

文本输入：

<input type="text">定义用于文本输入的单行输入字段：

<!DOCTYPE html>
<html>
<body>

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

<!--注意文本字段默认宽度为20个字符-->
</body>
</html>

<input type="radio">定义单选按钮

<!DOCTYPE html>
<html>
<body>

<form>
<input type="radio" name="sex" value="male" checked>Male
<br/>
<input yupe="radio" name="sex" value="female">Female
</form>

</body>
</html>

<input type="submit">定义向表单处理程序提交表单的按钮

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Micky">
<br/>
Last name:<br/>
<input type="text" name="lastname" value="Mouse">
<br/>
<input type="submit" value="Submit">
</form>

action属性定义在提交表单时执行的动作。

method属性规定在提交表单时所用的HTTP方法(GET或POST):

扫描二维码关注公众号，回复： 3686748 查看本文章

<form action="action_page.php" method="GET">
<form action="action_page.php" method="POST">

GET方法：如果表单是被动的，并且没有敏感信息。当您使用GET时，表单数据在页面地址栏中是可见的：

action_page.php?firstname=Micky&lastname=Mouse

GET方法适合少量数据的提交，浏览器会设定容量限制。

POST方法： POST方法安全性更佳，因为在地址栏中被提交数据是不可见的。

要被正常的提交，每个输入字段必须设置一个name属性。

<fieldset>元素组合表单中的相关元素，<legend>元素为<fieldset>元素定义标题。

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br/>
<input type="text" name="firstname" value="Mickey">
<br/>
<input type="text" name="lastname" value="Mouse">
<br/><br/>
<input type="submit" value="Submit">
</fieldset>
</form>

<select>元素定义下拉列表

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
</select>

可以在select标签中添加value="xxx" selected定义预选项

<textarea>元素定义多行输入字段(文本域)。

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

<button>元素定义可以点击的按钮

<button type="button" onclick="alert("Hello World!")">Click Me!</button>

HTML5新加了3种元素：<datalist> <keygen> <output>

<datalist>元素为<input>元素规定预定义选项列表，<input>元素的list属性必须引用<datalist>元素的id属性。

<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
</datalist>
</form>

<input type="password">定义密码字段，显示时会做掩码处理。

<input type="checkbox">定义复选框，允许用户选择零个或多个选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike.
<br/>
<input type="checkbox" name="vehicle" value="Car">I have a car.
</form>

还有其他HTML5新添加的元素，请参照http://www.w3school.com.cn/html/html_form_input_types.asp

和http://www.w3school.com.cn/html/html_form_attributes.asp

猜你喜欢