html学习笔记(表单和输入)

HTML 表单

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 <form> 来设置:

<form>
.
input 元素
.
</form>

---

文本域（Text Fields）

文本域通过<input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

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

---

密码字段

密码字段通过标签<input type=“password”> 来定义:

<form>
Password: <input type="password" name="pwd">
</form> 

---

单选按钮（Radio Buttons）

<input type=“radio”> 标签定义了表单单选框选项

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

---

复选框（Checkboxes）

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

---

提交按钮(Submit Button)

<input type=“submit”> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form> 

---

下拉列表

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

---

action属性的值指定了表单提交到服务器的地址。
placeholder text（占位符）是用户在 input 框输入任何内容之前放置在 input 框中的预定义文本。

<input type="text" placeholder="this is placeholder text">

对于表单，你可以指定某些选项为required（必填项），只有当用户填写了该选项后，用户才能够提交表单。
例如，如果你想要一个文本输入框设置为必填项，你可以在 input 元素中加上 required 属性，你可以使用：

<input type="text" required>

---

使用 checked 属性，你可以设置一个单选框和复选框默认被选中。
为此，只需在 input 元素中添加属性checked 。例如：

<input type="radio" name="test-name" checked>