发表于: 2019-09-10 19:41:53

1 956


(1)  文本域(Text Fields)

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

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

效果如图:

(2) 密码字段

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

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

效果如图:

3) 单选按钮(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> 

效果如图:点击submit按钮即可提交表单

6  文本域(Textarea)
本例演示如何创建文本域(多行文本输入控件)。用户可在文本域中写入文本。可写入字符的字数不受限制。

<textarea> 标签定义一个多行的文本输入控件。

文本区域中可容纳无限数量的文本,其中的文本的默认字体是等宽字体

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小,分别对应height和width

<textarea rows="10" cols="30"> 
   
 里面可以添加文本 </textarea> 

(7) placeholder属性

在任务四中可以与password以及name属性相结合

<form>

<input  type="password" name="pwd" placeholder="请输入密码">

</form>

效果如图

2 了解了px,em和rem的区别及优劣

PX



返回列表 返回列表
评论

    分享到