- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
HTML HOW TO PUT TEXT BOXES IN AN HTML5 FORM
2017.05.30 22:09
HOW TO PUT TEXT BOXES IN AN HTML5 FORM
HTML5 For Dummies Quick Reference
By Andy Harris
Many of the form elements HTML5 uses are based on the input tag. This web-page-building workhorse is a general-purpose tag used to make a number of interesting input objects, but it isn’t the only type of text box at your disposal. You can also create password fields and multiline text boxes, as shown in the top part of this form demo.
The code for the text boxes in this figure looks like this:
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>formDemo.html</title>
<meta charset = "UTF-8" />
</head>
<body>
<h1>Form Demo</h1>
<form>
<fieldset>
<legend>Text input</legend>
<p>
<label>Text box</label>
<input type = "text"
id = "myText"
value = "text here" />
</p>
<p>
<label>Password</label>
<input> type = "password"
id = "myPwd"
value = "secret" />
</p>
<p>
<label>Text Area</label>
<textarea> id = "myTextArea"
rows = "3"
cols = "80">Your text here</textarea>
</p>
</fieldset>
</form>
</body>
</html>
A BASIC TEXT BOX
Building a basic text box is straightforward:
-
Create an input element.
The <input> tag creates the general structure of the element.
-
Set the type to “text“ to indicate that you’re building a standard text element, not something more elaborate.
-
Add an id attribute to name the element.
This becomes very important when you add JavaScript to the page because your JavaScript code will use the ID to extract data from the form.
-
Add default data.
You can add default data if you want, using the value attribute. Any text you place in the value will become the default value of the form.
The text element places a small box on the screen. When a visitor to your web page selects the box, the cursor will change to an I-beam, and your visitor will be able to type text into the box.
A PASSWORD FIELD
The password field, shown in the figure, looks similar to the ordinary text field, but it has one primary difference: When the user types data into the password field, the content of the field is replaced by asterisks.
A password field uses the same input tag as a basic text field. The only difference is that you set the id attribute to “password”.
The replacement asterisks may prevent an evil onlooker from discovering your password, but a password field offers no real security — especially if you use JavaScript, which makes the retrieval code freely available to the browser. JavaScript is not the language to use if you want to keep a lot of secrets.
A MULTI-LINE TEXT BOX
Sometimes you want to give visitors to your web page the ability to enter several lines of text. The HTML5 textarea element is perfect for this situation. Here’s how to make your own text area:
-
Begin with the <textarea> tag to indicate the beginning of a multi-line text box.
Use the <label> tag to give your text area a name if you like.
-
Specify the number of rows.
Indicate the number of rows (or lines) of text you want the text area to contain. Larger boxes accommodate more text but require more room on the screen.
-
Indicate the number of columns.
The number of columns shows how wide (in characters) the text box should be. A page-width form is generally 80 characters.
-
Add the </textarea> closing tag.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
