HTML 表单

文本输入

<form>
 First name:<br>
<input type="text" name="firstname" value="aa"> <!--必须有name属性才能向后端传值,value提供默认值-->
<br>
 Last name:<br>
<input type="text" name="lastname">
</form> 

---

单选按钮输入

<form>
<input type="radio" name="sex" value="male" checked>Male<!--checked默认勾选此项-->
<br>
<input type="radio" name="sex" value="female">Female
</form> 

---

提交表单数据按钮

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

---

select下拉列表

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

---

多行文本输入

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

---

button按钮

<button type="button" onclick="alert('Hello World!')">点击我！</button>
<!-- 与js函数绑定,
-->
<input type="Submit" vlue="Submit"/>
<!-- 提交表单按钮,
-->
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
<!--似乎与第一个按钮没区别-->

---

password

<form>
 User name:<br>
<input type="text" name="username">
<br>
 User password:<br>
<input type="password" name="psw"><!--password 字段中的字符会被做掩码处理-->
</form> 

---

复选框

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

---

文件

<input type="file" name="img" multiple="multiple" />

---

HTML5新增输入类型

​

• color
• date
• datetime
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url

​

---

HTML Input属性

• value规定输入字段的初始值

• readonly规定字段只读

• disabled规定输入字段禁用，被禁用的元素不会被提交。

• size规定输入字段的尺寸

• autofacus规定设置的input元素自动获得焦点

• formenctype规定当把表单数据提交至服务器时如何对其编码，如multipart/form-data,仅针对method=post。

<form action="demo_post_enctype.asp" method="post">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formenctype="multipart/form-data" formmethod="POST"
   value="Submit as Multipart/form-data">
</form> 

• formmethod定义提交数据的HTTP方法。

• formtarget指示在何处显示接收到的响应。

• mutiple允许用户在input元素输入一个以上的值，适用于一下输入类型：email和file。

• pattern用于检查<input>元素值的正则表达式。

• placeholder用以描述输入字段预期值的提示。

• required规定必须填写该字段。