User interface for either/or text input [duplicate]

Question

This question already has an answer here:

• Combining email and phone inputs into a single text field 4 answers

I have an either/or scenario for text input which I'd like to mock up as shown below. Any ideas how I can proceed with html/css (this should be responsive).

Edit :
Sorry for being unclear. Not sure if this is even the right forum now. I am looking for a way to design the lines connecting the fields with the (OR) in between using html / css

Answer 1

The HTML/CSS portion of your question is better suited to another of the SE sites, but I'll answer the interaction design portion of it.

If you only need the user to respond to one of the fields, try something like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Once the user has clicked on one field, grey out the second.

If you have a preference for users completing one field over the other, make it a default option with a link to specify an alternative instead. The overwhelming majority of users will follow the path of least resistance and just answer the question you ask.

^{download bmml source}

Answer 2

Use radio buttons for eMail and Phone Number with input box by the side. If eMail radio is clicked, e-Mail input is enabled, focus is set to eMail input and phone number is disabled. If phone number radio buttion is clicked, clear eMail input, disable it and enable phone input with focus in it.

Answer 3

Another idea is to use just one field labelled:

Enter your phone number or email address: [ the input field ]

Both email addresses and phone numbers are quite easy to validate, so you should construct a condition in this case, checking fires if it is a valid email address (easier to tell, anyway) and then if it is a phone number.

But be careful with that - it will only work if you want one or another, not both. In other words, it's XOR, not OR (but in popular understanding "or" equals "exclusive or"). If you don't need/want both data, you could simplify the form a bit using this method.